Ken Burns trên Twitter Bootstrap Carousel

Question

Làm thế nào tôi có thể áp dụng Ken Burns Effect trên băng chuyền Bootstrap Twitter?

.carousel .item img { 
-webkit-transition: all 12s; 
-moz-transition: all 12s; 
-o-transition: all 12s; 
transition: all 12s; 
} 

... dường như không áp dụng chuyển tiếp.

Nhìn thấy nó trong hành động với jsFiddle ...

Answer 1

... dường như không áp dụng chuyển đổi.

Ồ, nhưng được! Bạn chỉ cần loại bỏ hai lỗi chính tả từ mã CSS của fiddle của bạn:

• một bên ngoài display: inline-block; của bất kỳ dấu ngoặc selector
• bình luận bắt đầu với // thay vì sử dụng /*...*/

Đây là của bạn corrected fiddle hoạt động khá tốt.

Chỉ còn lại một vấn đề:
Hiệu ứng Ken Burns chỉ bắt đầu ở trang chiếu thứ hai. Điều này là do thực tế là slide đầu tiên bắt đầu với lớp "active" ngay lập tức và không chuyển đổi sang nó. Vì vậy, nó bắt đầu với quy mô: 1,5 (mà nên là giá trị kết thúc của quá trình chuyển đổi).

Một giải pháp có thể là sử dụng hoạt ảnh khung hình CSS thay vì chuyển tiếp. Nhưng trong trường hợp này, việc sử dụng một chút JS dễ dàng hơn nhiều. Các băng chuyền bootstrap sử dụng JS anyway để thay đổi từ trượt để trượt bằng cách gắn/tách lớp học cho các mục.

Dưới đây là một giải pháp (mà cũng được làm sạch lên một chút), có sử dụng một lớp bổ sung "inactiveUntilOnLoad" làm trung hòa các lớp "hoạt động" trong suốt thời gian tải và đó được lấy ra tại DOM kiện đã sẵn sàng, vì vậy quá trình chuyển đổi sẽ diễn ra ngay từ slide đầu tiên:
jsFiddle working from first slide

---

bottomline:

Dưới đây là tất cả những thay đổi cần thiết để "Ken Burns" một trinh nữ Bootstrap 3 băng chuyền:

CSS thay đổi
Xác định chuyển tiếp cho .carousel .item img,
xác định tình trạng bắt đầu cho .carousel .item img,
xác định tình trạng kết thúc cho .carousel .item.active img,
cũng thêm bộ chọn .carousel .item.active.inactiveUntilOnLoad img để xác định trạng thái bắt đầu để tạo hoạt ảnh của khung hình đầu tiên.

/* transition */ 
.carousel .item img { 
    -webkit-transition: all 5s; 
    -moz-transition: all 5s; 
    -o-transition: all 5s; 
    transition: all 5s; 
} 
/* start status */ 
.carousel .item img, 
.carousel .item.active.inactiveUntilOnLoad img { 
    -webkit-transform: scale(1); 
    -moz-transform: scale(1); 
    -o-transform: scale(1); 
    -ms-transform: scale(1); 
    transform: scale(1); 
} 
/* end status */ 
.carousel .item.active img { 
    -webkit-transform: scale(1.5); 
    -moz-transform: scale(1.5); 
    -o-transform: scale(1.5); 
    -ms-transform: scale(1.5); 
    transform: scale(1.5); 
} 

HTML thay đổi
Add lớp .inactiveUntilOnLoad cho mục đầu tiên (hoạt động).

<div class="item active inactiveUntilOnLoad"> 

JS thay đổi
Thêm mã để DOM kiện đã sẵn sàng để loại bỏ lớp .inactiveUntilOnLoad.

$(function() { 
    $('.inactiveUntilOnLoad').removeClass('inactiveUntilOnLoad'); 
}); 

Answer 2

Cập nhật jsFiddle là here. Chỉ cập nhật nguồn hình ảnh cho trang trình bày đầu tiên vì nó đã bị xóa khỏi nguồn gốc.

<img src="http://3.bp.blogspot.com/-aIa3upFFC0M/UU2QTk3SJ6I/AAAAAAAAJo4/vcVayWzOjmc/s1600/sky+cloud+wallpapers+hd+(10).jpg" data-src="http://3.bp.blogspot.com/-aIa3upFFC0M/UU2QTk3SJ6I/AAAAAAAAJo4/vcVayWzOjmc/s1600/sky+cloud+wallpapers+hd+(10).jpg" alt="First slide" /> 

Answer 3

Cũng có jQuery plugin cho này: https://github.com/filippovjegor/bootstrap-kenbruns-carousel