Webdesign - Große Diashow mit dem Fade-Effekt ohne JavaScript

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Schnee im Knuttental bei Rein in Taufers Gabel-Spitze - Am Ende des Knuttental Lobiser Schupfen Lobiser Schupfen Gesamtansicht der Lobiser Schupfen Der Bauernhof Kofler zwischen den Wänden im Reintal Blick vom 2875 Meter hohen Peitlerkofel Der schneebedeckte Hauptalpenkamm Peitlerkofel Peitlerkofel Peitlerkofel Will die was von mir? Vielleicht ein kleines Rendevouz Auf dem Weg zur Durra-Alm oberhalb des Knuttentals Auf dem Weg zur Durra-Alm oberhalb des Knuttentals Regenbogen über Rein Unterhalb der Dreieckspitze Hochgall (3.436 m) Blick von der oberen Kofleralm zum Hochgall Auf dem Weg nach Ahornach Am Reiner Wasserfall Alm-Idylle Bergbauernhof bei Ahornach Bergbauernhof bei Ahornach Kellerbauerweg - Göge Alm

Photos © Monika & Klaus Franz

Große Diashow mit einem Fade-Effekt ohne JavaScript

02Mai2014

Große Diashow mit dem Fade-Effekt.


Funktioniert der Fade-Effekt auch bei einer größeren Diashow?
Aufbauend auf den vorherigen Artikel "Kleine Diashow mit dem Fade-Effekt ohne JavaScript" habe ich die Diashow auf dieser Seite mit 25 Bildern aufgebaut um die Performance zu testen und damit die Frage zu beantworten.
Als kleinen Trick kann man den Inhalt der Seite über einen Zeitraum von 5 Sekunden langsam einblenden um das Laden der Bilder ein wenig zu überbrücken. Dafür werden im CSS (Cascading Style Sheet) folgende Zeilen ergänzt:

article {
    animation: fadein 5s;
}

@keyframes fadein {
    from {opacity:0;} to {opacity:1;};
}

Für diese große Diashow habe ich wieder alle Bilder in einem eigenen "div-Container" platziert. Im CSS (Cascading Style Sheet) setze ich die Animationszeit auf 150 Sekunden und erweitere die Angaben für die Pseudo-Klasse "nth-of-type" und den zeitlichen Ablauf auf 25 Bilder.
Um die Prozentangabe bei den "@keyframes" zu ermitteln, habe ich 100% durch die doppelte Anzahl der Bilder geteilt. Damit erhalte ich jedes Mal nach Ablauf von 2% der Zeitdauer eine Veränderung der Anzeige. Bei der Menge der Angaben nutze ich natürlich die verkürzte Schreibweise bei den "@keyframes".

#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;
    animation: 150s ease-in-out infinite;
}

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

@keyframes fade1 {
     0% {opacity:1;}
     2% {opacity:1;}
     4% {opacity:0;}
    98% {opacity:0;}
   100% {opacity:1;}
}
            .
            .
            .
@keyframes fade25 {
     0% {opacity:0;}
    94% {opacity:0;}
    96% {opacity:1;}
    98% {opacity:1;}
   100% {opacity:0;}
}

Aber wie sich jeder vorstellen kann, ist der Aufwand jede einzelne "@keyframe"-Regel aufzuschreiben sehr groß.
Deshalb gehe ich hier noch einen Schritt weiter. Da ich alle CSS (Cascading Style Sheet)-Dateien in einem php-Script (Skriptsprache: Hypertext Preprocessor) zusammenfasse, wie in diesem "Artikel" beschrieben, werde ich dieses Script ein wenig erweitern. Dadurch spare ich in der CSS (Cascading Style Sheet)-Datei die oben aufgeführten Zeilen ab "#stapel img:nth-of-type(1){".
Nach dem Einbinden der CSS (Cascading Style Sheet)-Datei "grosse-diashow.css" füge ich also die folgenden Zeilen in das php-Script (Skriptsprache: Hypertext Preprocessor) ein:

<?php
    .
    .
    .
  $content .= get_remote_file('.../css/grosse-diashow.css');
  
  for ($z=1; $z<26; $z++)
    {
    echo '#stapel img:nth-of-type('.$z.'){animation-name:fade'.$z.'}';
    }
  
  echo '@keyframes fade1{';
  echo '0%,2%,100%{opacity:1}';
  echo '4%,98%{opacity:0}';
  echo '}';
  
  $a=2;
  for ($z=2; $z<25; $z++)
    {
    echo '@keyframes fade'.$z.'{';
    echo '0%,'.$a.'%,'.($a+6).'%,100%{opacity:0}';
    echo ($a+2).'%,'.($a+4).'%{opacity:1}'; 
    echo '}';
    $a=($a+4);
    }
  
  echo '@keyframes fade25{';
  echo '0%,94%,100%{opacity:0}';
  echo '96%,98%{opacity:1}';
  echo '}';
?>

Was wird gemacht?
Zuerst wird für jedes Bild mit Hilfe einer "for-Schleife" der Animationsname von 1 bis 25 vergeben. Dann wird die "@keyframes"-Regel für das erste Bild notiert, da es zu aufwendig ist diese per Berechnung zu definieren.
Für die "@keyframes"-Regeln der Bilder 2 bis 24 wird dann eine neue "for-Schleife" benutzt, die die Regeln automatisch schreibt. Der Zähler der Schleife (z) läuft dabei von 2 bis 24 und durch die Variable (a) wird die Prozentangabe definiert. Als Beispiel für das zweite Bild (z=2) werden mit der Variablen (a) die Regeln für 2%, 4%, 6% und 8% festgelegt und der Zähler danach um 4 erhöht, so dass beim dritten Bild mit "6% {opacity: 0}" begonnen wird, und so weiter.
Und für das Einblenden des letzten Bildes wird die "@keyframes"-Regel wieder direkt aufgeschrieben.

Das war es auch schon.
Die CSS (Cascading Style Sheet)-Datei "grosse-diashow.css" hat sich dabei um 4.481 Byte verkleinert, aber das php-Script (Skriptsprache: Hypertext Preprocessor) nur um 456 Byte vergrößert.


16Okt2014

Optimierte Umsetzung der großen Diashow


Die Berechnung der Animationszeit und der Startzeiten werden wie bei der "kleinen Diashow" vorgenommen und auch der Aufbau ist exakt gleich.

Das neue 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;
}

@keyframes fade {
    1.33%, 4%          {opacity:1;}
    0%,    5.33%, 100% {opacity:0;}
}

Auch die Berechnung der Prozentsätze für die Deckkraft "opacity: 1/0" bei der "@keyframes-Regel" wird wie bei der kleinen Diashow vorgenommen. In Klammern stehen die Werte für diese Diashow:

A:                 Bilderanzahl (25 Bilder)

Z:                 Zeit der Sichtbarkeit(4 Sekunden)

D:                 Überblenddauer (2 Sekunden)

G = ( Z + D ) * A: Gesamtzeit der Animation (150 Sekunden)

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

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

{opacity:0;} -                                  = 0%

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

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

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

{opacity:0;} -                                  = 100%

Wobei auch hier wieder der Aufruf der "@keyframes-Regel" bei den einzelnen Bildern, im Gegensatz zur kleinen Diashow, in das php-Script (Skriptsprache: Hypertext Preprocessor) ausgelagert werden kann.

<?php
    .
    .
    .
  $content .= get_remote_file('.../css/grosse-diashow.css');
  
  $a=0;
  for ($z=1; $z<26; $z++)
    {
    echo '#stapel img:nth-of-type('.$z.')
          {animation:fade 150s'.$a.'s ease-in-out infinite }';
    $a=($a+6);
    }
?>

Fertig und damit Ende der Optimierung!

Wie man sieht, habe ich auch mit vielen Bildern eine harmonische Diashow ganz ohne JavaScript (objektorientierte Programmiersprache) realisiert!
Aber wie schon bei der kleinen Diashow am Ende des Artikels beschrieben, muss man für die Anzeige auf einem Handy noch den entsprechenden Browser Präfix im CSS (Cascading Style Sheet) einfügen!

Heute möchte ich einmal nur dankeschön sagen.
Ich bin heute auf Ihre Website gestoßen, auf der Suche nach einer Diashow mit Überblendeffekt. Seiten mit 3 oder 5 Bildern habe ich viele gefunden. Ich brauche für meine Website aber min. 7 Bilder. Immer und immer wieder bin ich verzweifelt an der Berechnung der Opacität (0/1). Aber Ihr Vorschlag mit der Berechnung und dann mit der verkürzten Schreibweise brachte bei mir den Durchbruch.
Endlich habe ich eine Lösung, die es mir erlaubt meine Ideen umzusetzen.
Daher einfach nur Danke, dass Sie Ihr "\\\Hirnschmalz\\\" veröffentlichen, um anderen zu helfen.
Freundliche Grüße
Lutz Lesekrug

Zum Seitenanfang springen Λ