Webdesign - Ken Burns Effekt animiert Standbilder durch Bewegung

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Lobiser Schupfen Kuh auf der Alm Gabel-Spitze Eiszapfen an einem Heuschuppen Schnee im Knuttental

Photos © Monika & Klaus Franz

Ken Burns Effekt animiert Standbilder durch Bewegung

30Sep2015

Der Ken Burns Effekt animiert Standbilder


Der Ken Burns Effekt vermittelt den Eindruck einer Schwenkbewegung mit einer Kamera, obwohl es sich um statische Bilder handelt und zeichnet sich durch langsam dahingleitende Bilder aus. Eine so gezeigte Diashow bleibt länger in der Erinnerung da durch die Bewegung der Bilder die Aufmerksamkeit des Betrachters erhöht wird. Auch leichte Vergrößerungs- oder Zoomeffekte um Details besser zu erkennen, bezeichnet man dabei als Ken Burns Effekt.
Da dieser Effekt sich hervorragend für meine umgesetzten Diashows oder den Slidern anbietet, habe ich dieses Tutorial geschrieben.
Für diese neue Diashow mit dem Ken Burns Effekt benötige ich aber noch zwei Ergänzungen zu der ursprünglichen "kleinen Diashow mit dem Fade-Effekt" und werden zuerst an weiteren Beispielen erklärt.


29Jun2015

Die kleine Diashow kann angehalten werden


Eine Supportanfrage lautete: Wie kann man die Diashow mit "stapel:hover" anhalten?

Zuerst wird, wie auch bei den Slidern, ein separater "div-Container" mit dem Namen "pause" für das "Pausen-Zeichen" benötigt und wie folgt im HTML (HyperText Markup Language) eingebunden:

<div id="stapel1">
    <img src="reisen_suedtirol201005.jpg" width="600" height="400"
      alt="Lobiser Schupfen">
    <img src="reisen_suedtirol201012.jpg" width="600" height="400"
      alt="Kuh auf der Alm">
    <img src="reisen_suedtirol201002.jpg" width="600" height="400"
      alt="Gabel-Spitze">
    <img src="reisen_suedtirol201003.jpg" width="600" height="400"
      alt="Eiszapfen an einem Heuschuppen">
    <img src="reisen_suedtirol201001.jpg" width="600" height="400"
      alt="Schnee im Knuttental">
    <div class="pause"></div>
</div>

Auch das "Pausen-Zeichen" wird wie bei den Slidern umgesetzt.
Da die beiden großgeschriebenen I-Buchstaben über dem Bild positioniert werden sollen, wird der Container für das "Pausen-Zeichen" mit der Angabe "position: absolute" versehen.
Daher ist es wichtig, dass der "div-Container" für die Bildern nun zusätzlich die Angabe "position: relative" erhält. Alle anderen Angaben bleiben gleich.

Im neuen CSS (Cascading Style Sheet) kommen also zusätzlich die Angaben für ".pause", ".pause:after", "#stapel1:hover .pause" und bei "#stapel1" kommt die Angabe "position: relative" hinzu. Zum Schluss kommt mit "#stapel1:hover img" die Angabe, dass die Stapelverarbeitung anhalten soll.

.pause {
    position: absolute;
    font: bolder 1.3em/2 Impact;
    color: #eee;
    left: 570px;
    top: 5px;
    opacity: 0;
    z-index: 2;
    transition: 1s;
}

.pause:after {
    content: 'I I';
}

#stapel1:hover .pause {
    opacity: 1;
}

#stapel1 {
    position: relative;
    height: 25em;
    width: 37.5em;
    margin: -2.5em auto 1.2em;
    border: 5px solid #eee;
    box-shadow: 1px 1px 5px 2px #777;
}

#stapel1 img {
    position: absolute;
    height: 25em;
    width: 37.5em;
    opacity: 0;
    cursor: pointer;
}

#stapel1 img:nth-of-type(1) {
    animation: fade1 30s ease-in-out infinite;
}

#stapel1 img:nth-of-type(2) {
    animation: fade1 30s 6s ease-in-out infinite;
}

#stapel1 img:nth-of-type(3) {
    animation: fade1 30s 12s ease-in-out infinite;
}

#stapel1 img:nth-of-type(4) {
    animation: fade1 30s 18s ease-in-out infinite;
}

#stapel1 img:nth-of-type(5) {
    animation: fade1 30s 24s ease-in-out infinite;
}

@keyframes fade1 {
    6.66%, 20%          {opacity:1;}
       0%, 26.66%, 100% {opacity:0;}
}

#stapel1:hover img {
    animation-play-state: paused;
}



Kleines Cottage Weiler Runch Gerfalke Wollkopfgeier Lobiser-Schupfen

Photos © Monika & Klaus Franz


Damit wird nun beim Überfahren der Bilder mit der Maus die Diashow angehalten!


10Aug2015

Die kleine Diashow startet direkt mit einem Bild


Eine weitere Supportanfrage lautete: Wie kann ich die Show damit beginnen, dass beim Öffnen der Website das erste Bild bereits sichtbar ist?

Normalerweise wird auch das erste Bild mit dem Fade-Effekt langsam eingeblendet, aber dadurch wird beim Aufruf einer Seite zuerst nur ein Rahmen oder ein schwarzer Bildschirm sichtbar. Um nun das erste Bild direkt einzublenden, ist nur eine kleine Änderung bei den folgenden Angaben im CSS (Cascading Style Sheet) notwendig.
Das erste Bild ruft den neuen Keyframe mit dem Namen "fade2" auf, der bereits nach 0,01% die Sichtbarkeit des Bildes auf 100% setzt. Alle andern Bilder rufen nach wir vor den Keyframe mit dem Namen "fade1" auf. Zur besseren Übersicht habe ich beide Keyframes in diesem Tutorial dokumentiert.

#stapel1 img:nth-of-type(1) {
    animation: fade2 30s ease-in-out infinite;
}

@keyframes fade1 {
    6.66%, 20%          {opacity:1;}
       0%, 26.66%, 100% {opacity:0;}
}

@keyframes fade2 {
    0.01%, 20%          {opacity:1;}
           26.66%, 100% {opacity:0;}
}



Kleines Cottage Weiler Runch Gerfalke Wollkopfgeier Lobiser-Schupfen

Nun wird das erste Bild bereits beim Aufruf einer Webseite eingeblendet!

Hallo Herr Franz,
Vielen, vielen Dank für die Hilfe. Ihre Seite ist echt super und sehr hilfreich!!
LG Nelly


Der Ken Burns Effekt

Die nächste Anfrage lautete: Wie kann man Bilder langsam in verschiedene Richtungen bewegen, oder wie kann in ein Bild gezoomt werden?

Durch diese Frage kam ich auf die Idee eine Diashow auf einer Webseite mit dem Ken Burns Effekt aufzubauen.
Grundlage hierfür ist der Aufbau der kleinen Diashow, aber da die Bilder sich unterschiedlich bewegen sollen, erhält jedes Bild seinen eigenen Keyframe. Außerdem soll der Betrachter die Diashow anhalten können, und das erste Bild direkt beim Aufruf der Seite erscheinen.

Die Bilder müssen für den Ken Burns Effekt größer gewählt werden, als der Ausschnitt in dem diese angezeigt werden. In diesem Beispiel sind die Bilder 800*551 Pixel groß, aber der Ausschnitt beträgt nur 600*400 Pixel. Das HTML5 (HyperText Markup Language)-Gerüst sieht wieder sehr übersichtlich aus und ist wie folgt aufgebaut.

<div id="stapel3">
    <img src="bilder800/reisen_suedtirol201005.jpg" width="800"
          height="551" alt="Gesamtansicht der Lobiser Schupfen">
    <img src="bilder800/reisen_suedtirol201004.jpg" width="800"
          height="551" alt="Schnee auf einem Heuschuppen">
    <img src="bilder800/reisen_suedtirol201003.jpg" width="800"
          height="551" alt="Eiszapfen an einem Heuschuppen">
    <img src="bilder800/reisen_suedtirol201002.jpg" width="800"
          height="551" alt="Gabel-Spitze - Am Ende des Knuttental">
    <img src="bilder800/reisen_suedtirol201001.jpg" width="800"
          height="551" alt="Schnee im Knuttental bei Rein in Taufers">
    <div class="pause"></div>
</div>

Nun erkläre ich das zugehörige CSS (Cascading Style Sheet). Zuerst kommen, wie aus dem ersten Beispiel auf dieser Seite, die allgemeinen Festlegungen wie die Umsetzung des Pausenzeichen.

Dann bekommt der "div-Container" mit dem Namen "stapel3" seine Position, Größe und Abstand zum Rand mitgeteilt, und wie immer einen Rand und einen Schattenwurf. Damit die Bilder nicht über dem Rahmen hinauslaufen, die Bilder sind ja größer als der "div-Container", benötige ich noch die Deklaration "overflow: hidden".
Und wie anfangs schon erwähnt, wird für jedes Bild ein eigener Keyframe mit den Namen "fade31-fade35" aufgerufen.

#stapel3 {
    position: relative;
    height: 25em;
    width: 37.5em;
    margin: 2em auto 0;
    border: 5px solid #eee;
    box-shadow: 1px 1px 5px 2px #777;
    overflow: hidden;
}

#stapel3 img {
    position: absolute;
    height: 34.438em;
    width: 50em;
    opacity: 0;
    cursor: pointer;
}

#stapel3 img:nth-of-type(1) {
    animation: fade31 30s ease-in-out infinite;
}

#stapel3 img:nth-of-type(2) {
    animation: fade32 30s 6s ease-in-out infinite;
}

#stapel3 img:nth-of-type(3) {
    animation: fade33 30s 12s ease-in-out infinite;
}

#stapel3 img:nth-of-type(4) {
    animation: fade34 30s 18s ease-in-out infinite;
}

#stapel3 img:nth-of-type(5) {
    animation: fade35 30s 24s ease-in-out infinite;
}

Nun beginnt die eigentliche Überlegung, wie will ich jedes einzelne Bild animieren? Soll ein Bild von links unten nach rechts oben schwenken? Soll in ein Bild gezoomt werden?
Diese Überlegungen hängen aber vom Inhalt eines Bildes ab und sind daher ganz individuell zu bestimmen.

Um ein Bild zu verschieben bietet sich der Befehl "transform: translate3d (x, y, z)" an. Im Artikel der "Animation von Wolken" habe ich bereits den Unterschied zwischen der 3D-Transformation und einer Verschiebung mit "left" beschrieben. Durch das Hardware-Rendering bei der 3D-Transformation verläuft eine Animation weitaus flüssiger und kommt deshalb auch hier zum Einsatz. Auch von einer 2D-Transition ist abzuraten, da hier jedes Zwischenbild einer Animation einzeln berechnet wird.

Um die verschiedenen Möglichkeiten zu verdeutlichen, habe ich die Bilder in dieser Diashow unterschiedlich animiert.

  • Das erste Bild wird durch die Angabe bei 0,01% und "opacity: 1" sofort eingeblendet. Da beim Wechsel vom letzten auf das erste Bild dieses wieder direkt eingeblendet würde, muss hier "z-index: 0" gesetzt werden. Damit liegt das erste Bild im Stapel hinter dem letzten Bild und wird erst durch das Ausblenden des letzten Bildes eingeblendet. Es sieht also so aus, als ob das erste Bild ebenfalls langsam eingeblendet wird.
    Durch die Angabe bei 0% "transform: translate 3d (-110px, -90px, 0)" wird das Bild beim Start um 110 Pixel nach links und 90 Pixel nach oben versetzt.
    Und durch die Angabe bei 26,66% "transform: translate 3d (-70px, -50px, 0)" schwenkt das Bild um 40 Pixel nach rechts und 40 Pixel nach unten. Das heißt der sichtbare Bildausschnitt schwenkt von rechts unten nach links oben.
  • Das zweite Bild wird von 90% auf 100% vergrößert und schwenkt von links unten nach rechts oben.
  • Das dritte Bild wird von 100% auf 80% verkleinert und schwenkt von oben nach unten.
  • Das vierte Bild schwenkt von links unten nach rechts oben.
  • Das fünfte Bild wird von 90% auf 100% vergrößert und schwenkt von links unten nach rechts oben.
@keyframes fade31 {
     0.01%,  20% {opacity:1; z-index:0;}
    26.66%       {transform: translate3d(-70px,-50px,0);
                  opacity:0; z-index:0;}
        0%, 100% {transform: translate3d(-110px,-90px,0);
                  opacity:0; z-index:0;}
}

@keyframes fade32 {
     6.66%,  20% {opacity:1; z-index:1;}
    26.66%       {transform: scale(1) translate3d(-140px,-80px,0);
                  opacity:0; z-index:0;}
        0%, 100% {transform: scale(.9) translate3d(-120px,-100px,0);
                  opacity:0; z-index:0;}
}

 @keyframes fade33 {
     6.66%,  20% {opacity:1; z-index:1;}
    26.66%       {transform: scale(.8) translate3d(-120px,-100px,0);
                  opacity:0; z-index:0;}
        0%, 100% {transform: scale(1) translate3d(-120px,-50px,0);
                  opacity:0; z-index:0;}
}

@keyframes fade34 {
     6.66%,  20% {opacity:1; z-index:1;}
    26.66%       {transform: translate3d(-110px,-50px,0);
                  opacity:0; z-index:0;}
        0%, 100% {transform: translate3d(-90px,-100px,0);
                  opacity:0; z-index:0;}
}

@keyframes fade35 {
     6.66%,  20% {opacity:1; z-index:1;}
    26.66%       {transform: scale(1) translate3d(-120px,-50px,0);
                  opacity:0; z-index:0;}
        0%, 100% {transform: scale(.9) translate3d(-70px,-90px,0);
                  opacity:0; z-index:0;}
}

#stapel3:hover img {
    animation-play-state: paused;
}

Damit ist die bewegende Diashow mit dem Ken Burns Effekt fertig gestellt, und auch für einen Slider ist auf diese Art eine Realisierung möglich.
Und schönen Dank an Martin für die Anfrage, mir hat die Umsetzung Spass gemacht und ich habe wieder etwas Neues gelernt.

Hallo Klaus,
genau dass habe ich gemeint! Woow! Vielen, vielen Dank!
Gruß, Martin.

Zum Seitenanfang springen Λ