Ken Burns auf Twitter Bootstrap Karussell

Question

Wie könnte ich eine Ken Burns Effect auf einem Twitter Bootstrap Carousel anwenden?

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

... scheint Übergang nicht anzuwenden.

Sehen sie in Aktion mit jsFiddle ...

Answer 1

... Übergang nicht zu gelten scheint.

Oh, aber es tut! Sie haben nur zwei Fehler aus der CSS-Code Ihrer Geige zu entfernen:

• ein display: inline-block; außerhalb jeder Wähler Klammern
• ein Kommentar mit // beginnen statt mit /*...*/

Hier ist Ihre corrected fiddle das funktioniert ganz gut.

Es gibt nur ein Problem links:
Der Ken Burns Effekt erst bei der zweiten Folie. Dies liegt daran, dass die allererste Folie sofort mit der Klasse "aktiv" beginnt und nicht in sie übergeht. Es beginnt also mit der Skalierung: 1,5 (was der Endwert des Übergangs sein sollte).

Eine Lösung könnte die Verwendung von CSS-Keyframe-Animationen anstelle von Übergängen sein. Aber in diesem Fall ist es viel einfacher, ein bisschen JS zu verwenden. Das Bootstrap-Karussell verwendet JS trotzdem, um von Folie zu Folie zu wechseln, indem Klassen an die Artikel angehängt/gelöst werden.

Hier ist eine Lösung, die verwendet eine zusätzliche Klasse „inactiveUntilOnLoad“, die die „aktiv“ Zeitklasse bei Last neutralisiert (das ist auch ein bisschen aufgeräumt) und dass bei DOM bereit Ereignisse entfernt wird, so der Übergang erfolgt von der ersten Folie:
jsFiddle working from first slide

---

Grundlinie:

Hier sind alle erforderlichen Veränderungen "Ken Burns" eine Jungfrau Bootstrap 3 Karussell:

CSS ändert
Übergang definieren für .carousel .item img,
Startstatus definieren für .carousel .item img,
Endstatus für .carousel .item.active img definieren,
fügen Sie auch Selektor .carousel .item.active.inactiveUntilOnLoad img zur Definition des Startstatus hinzu, um die Animation des ersten Frames zu erstellen.

/* 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 ändert
Add Klasse .inactiveUntilOnLoad zum ersten (aktiven) Element.

<div class="item active inactiveUntilOnLoad"> 

JS ändert
hinzufügen Code DOM bereit Ereignisklasse .inactiveUntilOnLoad zu entfernen.

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

Answer 2

Aktualisiert jsFiddle ist here. Aktualisiert die Bildquelle für die erste Folie, sobald sie aus der Originalquelle entfernt wurde.

<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

Auch gibt es jQuery-Plugin für diese: https://github.com/filippovjegor/bootstrap-kenbruns-carousel