Webdesign - Kleine Diashow mit dem Fade-Effekt ohne JavaScript

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Gesamtansicht der Lobiser Schupfen Lobiser Schupfen Lobiser Schupfen Gabel-Spitze - Am Ende des Knuttental Schnee im Knuttental bei Rein in Taufers

Photos © Monika & Klaus Franz

Kleine Diashow mit einem Fade-Effekt ohne JavaScript

01Mai2014

Kleine Diashow mit dem Fade-Effekt.


Ein Fade-Effekt für eine kleine Diashow ist mit CSS3 (Cascading Style Sheet) sehr einfach zu realisieren und sorgt für einen harmonischen und weichen Ablauf beim Überblenden von Elementen. Und der hier vorgestellte Effekt kommt dabei ganz ohne JavaScript (objektorientierte Programmiersprache) aus.
Es ist sogar möglich ganze "div-Container" oder Absätze wie diesen hier mit dem Fade-Effekt weich einblenden zu lassen. Drücken Sie hierfür einmal die "F5-Taste" zum neuen Aufruf der aktuellen Seite um den Fade-Effekt zu sehen.

Ich habe mich bei dieser kleinen Diashow mit dem Überblenden von fünf Bildern beschäftigt und erkläre welche Schritte für das Umsetzen notwendig sind.

Zuerst platziere ich die Bilder hintereinander in einem separaten "div-Container" mit dem Namen "stapel" wie folgt im HTML (HyperText Markup Language):

<div id="stapel">
    <img src="reisen_suedtirol201005.jpg" width="800" height="551"
      alt="Gesamtansicht der Lobiser Schupfen">
    <img src="reisen_suedtirol201004.jpg" width="800" height="551"
      alt="Lobiser Schupfen">
    <img src="reisen_suedtirol201003.jpg" width="800" height="551"
      alt="Lobiser Schupfen">
    <img src="reisen_suedtirol201002.jpg" width="800" height="551"
      alt="Gabel-Spitze - Am Ende des Knuttental">
    <img src="reisen_suedtirol201001.jpg" width="800" height="551"
      alt="Schnee im Knuttental bei Rein in Taufers">
</div>

Die Bilder im "div-Container" "stapel" werden im CSS (Cascading Style Sheet) absolut ausgerichtet. Das sorgt dafür dass die Bilder am gleichen Platz und nicht untereinander angezeigt werden.

#stapel {
    height: 34.438em;
    width: 50em;
    margin: 2em auto 0;
    border: 5px solid #eee;
    box-shadow: 1px 1px 5px 2px #777;
}

#stapel img {
    position: absolute;
    height: 34.438em;
    width: 50em;
}

Bis hier würden alle Bilder übereinander gestapelt und das letzte Bild (Schnee im Knuttental bei Rein in Taufers) wäre sichtbar. Und für alle Browser, die die nachfolgende Animation nicht darstellen können (zum Beispiel der IE8), wäre hier Schluss und das letzte Bild würde auf dieser Seite erscheinen.


So weit, so gut! Aber ich betrachte in diesem Beispiel die modernen Browser.

Da die Bilder sanft eingeblendet und überblendet werden sollen, werden die Bilder mit "opacity: 0" ausgeblendet und dem Element "#stapel img" die CSS3 (Cascading Style Sheet) Eigenschaft "animation" hinzugefügt.

Für die Dauer der kompletten Animation, das heißt das Überblenden aller fünf Bilder, habe ich 30 Sekunden gewählt, und da diese Animation in einer Endlosschleife laufen soll, wird die Eigenschaft "animation-iteration-count" mit dem notwendigen Wert "infinite" verwendet.

#stapel img {
    position: absolute;
    height: 34.438em;
    width: 50em;
    opacity: 0;
    animation-duration: 30s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

Oder die verkürzte Schreibweise:

#stapel img {
    position: absolute;
    height: 34.438em;
    width: 50em;
    opacity: 0;
    animation: 30s ease-in-out infinite;
}

Nun muss ich jedem Bild noch einen eigenen zeitlichen Ablauf der Animation zuweisen.
Wie schon im vorherigen Tutorial, dem "Fade-Effekt", beschrieben, kann man jedem Bild eine eigene "class" zuweisen und damit einzeln ansprechen. Aber ich vergebe für die Animationen wieder eigene Namen und verwende die Pseudo-Klasse "nth-of-type". Die Angaben im CSS (Cascading Style Sheet) für die Namensbildung und den Überblendungseffekt der Bilder sehen dann so aus:

#stapel img:nth-of-type(1) {
    animation-name: fade1;
}

#stapel img:nth-of-type(2) {
    animation-name: fade2;
}

#stapel img:nth-of-type(3) {
    animation-name: fade3;
}

#stapel img:nth-of-type(4) {
    animation-name: fade4;
}

#stapel img:nth-of-type(5) {
    animation-name: fade5;
}

@keyframes fade1 {
     0% {opacity:1;}
    10% {opacity:1;}
    20% {opacity:0;}
    30% {opacity:0;}
    40% {opacity:0;}
    50% {opacity:0;}
    60% {opacity:0;}
    70% {opacity:0;}
    80% {opacity:0;}
    90% {opacity:0;}
   100% {opacity:1;}
}

@keyframes fade2 {
     0% {opacity:0;}
    10% {opacity:0;}
    20% {opacity:1;}
    30% {opacity:1;}
    40% {opacity:0;}
    50% {opacity:0;}
    60% {opacity:0;}
    70% {opacity:0;}
    80% {opacity:0;}
    90% {opacity:0;}
   100% {opacity:0;}
}

@keyframes fade3 {
     0% {opacity:0;}
    10% {opacity:0;}
    20% {opacity:0;}
    30% {opacity:0;}
    40% {opacity:1;}
    50% {opacity:1;}
    60% {opacity:0;}
    70% {opacity:0;}
    80% {opacity:0;}
    90% {opacity:0;}
   100% {opacity:0;}
}

@keyframes fade4 {
     0% {opacity:0;}
    10% {opacity:0;}
    20% {opacity:0;}
    30% {opacity:0;}
    40% {opacity:0;}
    50% {opacity:0;}
    60% {opacity:1;}
    70% {opacity:1;}
    80% {opacity:0;}
    90% {opacity:0;}
   100% {opacity:0;}
}

@keyframes fade5 {
     0% {opacity:0;}
    10% {opacity:0;}
    20% {opacity:0;}
    30% {opacity:0;}
    40% {opacity:0;}
    50% {opacity:0;}
    60% {opacity:0;}
    70% {opacity:0;}
    80% {opacity:1;}
    90% {opacity:1;}
   100% {opacity:0;}
}

Für den Überblendungseffekt verändere ich, wie oben aufgeführt, die Transparenz der Bilder wie folgt.
Das erste Bild wird nach 10% der Zeitdauer langsam ausgeblendet, bis dass es nach 20% komplett unsichtbar "opacity: 0" ist. Während dieser Zeit wird das zweite Bild bereits langsam eingeblendet, so dass also nach 15% des zeitlichen Ablaufs das erste Bild halb transparent und das zweite Bild halb sichtbar ist. Die Bildwechsel der weiteren Bilder funktionieren auf die gleiche Art und Weise.

Und da man in einer "@keyframes-Regel" nur die Veränderungen von Zuständen aufführen muss und auch noch die gleichen Prozentangaben zusammenfassen kann, wird das CSS (Cascading Style Sheet) noch erheblich kleiner.

@keyframes fade1 {
     0%, 10%, 100% {opacity:1;}
    20%, 90%       {opacity:0;}
}

@keyframes fade2 {
     0%, 10%, 40%, 100% {opacity:0;}
    20%, 30%            {opacity:1;}
}

@keyframes fade3 {
     0%, 30%, 60%, 100% {opacity:0;}
    40%, 50%            {opacity:1;}
}

@keyframes fade4 {
     0%, 50%, 80%, 100% {opacity:0;}
    60%, 70%            {opacity:1;}
}

@keyframes fade5 {
     0%, 70%, 100% {opacity:0;}
    80%, 90%       {opacity:1;}
}

16Okt2014

Optimierte Umsetzung der kleinen Diashow


Da die einzelnen "@keyframes-Regeln" für die Bilder identisch sind kann man auch nur eine Regel, aber mit gestaffelten Startzeiten, definieren. Das bedeutet dass die Angaben der Animation (Dauer der Animation und Art der Überblendung) nicht mehr im "#stapel img" sondern im Aufruf der "@keyframes-Regel" bei jedem Bild angegeben werden.

Berechnung der Animationszeit und der Startzeiten. In Klammern stehen die Werte für diese kleine Diashow:

A:                 Anzahl der Bilder (5 Bilder)

Z:                 Zeit die ein Bild komplett sichtbar ist (4 Sekunden)

D:                 Dauer einer Überblendung (2 Sekunden)

G = ( Z + D ) * A: Gesamtdauer der Animation (30 Sekunden)

S = G / A:         Staffelung der Startzeiten (6 Sekunden)

Die Startzeiten der Bilder verschiebt man folglich um 6 Sekunden. Damit startet die Animation für das erste Bild bei 0 Sekunden, das zweite Bild startet nach 6 Sekunden, das nächste bei 12 Sekunden und so weiter.
Das neue und viel kleinere CSS (Cascading Style Sheet) mit allen Angaben.

#stapel {
    height: 34.438em;
    width: 50em;
    margin: 2em auto 0;
    border: 5px solid #eee;
    box-shadow: 1px 1px 5px 2px #777;
}

#stapel img {
    position: absolute;
    height: 34.438em;
    width: 50em;
    opacity: 0;
}

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

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

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

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

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

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

Was jetzt noch fehlt, ist die Erklärung wie die Prozentsätze für die Deckkraft "opacity: 1/0" bei der "@keyframes-Regel" ermittelt wurden.

Startzeiten der Animation

Damit auch beim ersten Durchlauf der Animation, also von 0 bis 30 Sekunden, das Einblenden eines Bildes zu sehen ist, muss bei 0% die Deckkraft auf "opacity: 0" eingestellt werden.

Die anderen Prozentsätze werden gemäß dem oben dargestellten Schema wie folgt berechnet. In Klammern stehen die Werte für diese kleine Diashow:

A:                 Anzahl der Bilder (5 Bilder)

Z:                 Zeit die ein Bild komplett sichtbar ist (4 Sekunden)

D:                 Dauer einer Überblendung (2 Sekunden)

G = ( Z + D ) * A: Gesamtdauer der Animation (30 Sekunden)

S = G / A:         Staffelung der Startzeiten (6 Sekunden)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -

{opacity:0;} -                                  = 0%

{opacity:1;} - [ 100% * D / G  ]                = 6,66%

{opacity:1;} - [ 100% / A ]                     = 20%

{opacity:0;} - [ 100% * ( Z + ( 2 * D ) ) / G ] = 26,66%

{opacity:0;} -                                  = 100%

Fertig und damit Ende der Optimierung!
Mit einfachen Mitteln ist diese harmonische Überblendung realisiert und auf dieser Webseite eingebunden worden.


17Okt2016

Die Diashow auch auf einem Handy darstellen


Ich habe auf all meinen Seiten grundsätzlich noch ein zusätzliches JavaScript (objektorientierte Programmiersprache) eingebaut, mit dem man auf die zusätzlichen Deklarationen für die entsprechenden Browser Präfixes (-webkit-...) verzichten kann. Aber genau das möchte ich bei diesem Beispiel vermeiden!
Solange die Syntax der CSS (Cascading Style Sheet)-Eigenschaften, für zum Beispiel Farbverläufe, Schatten oder in diesem Beispiel die Animation, noch nicht endgültig feststehen, ist es den Herstellern der Browser möglich diese CSS (Cascading Style Sheet)-Eigenschaften mit einem zusätzlichen Vendor-Präfix (Lieferanten-Vorzeichen) zu versehen. Dadurch entsteht für den Webdesigner ein sehr großer Aufwand die CSS (Cascading Style Sheet)-Formate entsprechend zu definieren, da es für die verschiedenen Browsern unterschiedliche Präfixe gibt und diese noch nicht einmal valide sind!
Die gängigen Vendor-Präfixe sind:

-webkit- für Webkit-Browser    (Chrome, Safari, Opera ab Version 15)
-moz-    für Mozilla-Browser   (Firefox bis Version 15,
                                wird heute nicht mehr benötigt)
-ms-     für Microsoft-Browser (Internet Explorer)
-o-      für Opera-Browser     (Opera bis Version 12,
                                wird heute nicht mehr benötigt)

Da die Anzeige auf einem Handy hauptsächlich auf Webkit-basierten Browsern, zum Beispiel für Android bis 4.4.4, geschieht, müsste man das CSS (Cascading Style Sheet) wie folgt ergänzen um für die Diashow vollkommen ohne JavaScript (objektorientierte Programmiersprache) auszukommen:

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

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

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

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

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

@-webkit-keyframes fade {
    6.66%, 20%          {opacity:1;}
       0%, 26.66%, 100% {opacity:0;}
}

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

Jetzt wird die Diashow auch auf einem Handy abgespielt.

Und vielen Dank an Anke Kridane für den Denkanstoß diesen Passus noch zu ergänzen.

Zum Seitenanfang springen Λ