Webstandard & Webdesign - CSS, HTML

 

Fading Images - CSS3 Tutorial - Auf- und Abblenden von Bildern ohne JavaScript

CSS3 is pushing the Web - Ob Shopbetreiber mit Produktdetailseiten, Reiseportale mit Landingpages für bestimmte Reiseziele oder selbstständige Designer oder Fotografen, mit der Möglichkeit von Interessenten online über ihr Portfolio kontaktiert und somit gebucht zu werden, die Möglichkeiten für einen Einsatz des heute vorgestellten visuellen Effektes auf Basis von CSS3 sind vielfältiger Natur. Und das nicht nur weil es möglich ist und Spaß macht, sondern weil es auch wie bspw. in Bezug auf die Performance, offensichtliche Vorteile mit sich bringt. Denn das heutige CSS3 Tutorial hat sich es daher zur Aufgabe gemacht, einen Effekt der bisher immer auf Basis von JavaScript realisiert wurde, mittels CSS3 zu lösen - die Rede ist von der Überblendung (faden) von Elementen, wie bspw. Bildern.

Bevor ich an dieser Stelle mit dem HTML-Code zu diesem Tutorial beginne, möchte ich ganz Martin Neuhof einem Fotografen aus Leipzig für die zur Verfügungstellung der wunderschönen Bildmotive, aus seiner Serie "kubanische Gesichter", danken! Denn ein solcher Effekt ist ohne entsprechend hochwertiges Bildmaterial nicht viel Wert und verliert somit an Aufmerksamkeit und somit unter Umständen an Effektivität. Das gilt für ein Portfolio ebenso, wie für eine Produktdetailseite! Aber nun zurück zum HTML-Code ;o)

CSS3 Tutorial - Step 1: Definieren der HTML-Struktur - Fading Images

Das HTML-Grundgerüst dieses Bereiches ist denkbar einfach. In einem bestimmten Bereich einer Webseite, wie in diesem Fall einer möglichen "Bühne" (#stage) einer Webseite, werden daher die später mittels CSS zu überblendenden Bilder (siehe folgenden Abbildung) untereinander angelegt.

Abb. 1: Die drei bei diesem Tutorial verwendeten Bilder von Martin Neuhof

Der Einfachheit halber und zum besseren Verständnis für die Betrachter dieses CSS Tutorials, werden die drei verwendeten Bilder (siehe Abbildung 01) durchnummeriert und entsprechend der Reihenfolge im HTML-Code nacheinander angelegt.

Code-Beispiel
...
<div id="stage">
    <img src="image-fading-cuba-01.jpg" alt="kubanische Gesichter 01" />
    <img src="image-fading-cuba-02.jpg" alt="kubanische Gesichter 02" />
    <img src="image-fading-cuba-03.jpg" alt="kubanische Gesichter 03" />
</div>
...


CSS3 Tutorial - Step 2: Ausrichten der Bühne und enthaltenen Bilder

Der Bereich der "Bühne" (#stage) der die Bilder, für die spätere Überblendung (fade) enthalten soll, wird als erstes relativ ausgerichtet (position:relative). Dann werden die Bilder darin absolut ausgerichtet. Der z-index für die Stappelung wird auf "1" gesetzt, damit man dann wie im verlinkten Beispiel am Ende dieses Tutorials, die Möglichkeit hat mit z-index und dem Wert "2" bspw. noch eine Element wie eine Überschrift darüber legen kann. Kleiner Tipp am Rande, sofern nicht bereits bekannt: Das Element mit dem höchsten z-index Wert liegt oben! Die Maße für die Höhe und Breite entsprechen in diesem Fall der Bildermaße und der Größe der Bühne.

Fading Images
#stage {
  position: relative;
}
#stage img {
  position: absolute;
  z-index: 1;
  left:0;
  top:0;
  width:650px;
  height:300px;
}

Zum jetzigen Zeitpunkt wären alle drei Bilder dieses CSS3 Tutorials mit den identischen Eigenschaften übereinander gestapelt, weshalb nun lediglich die dritte Abbildung (image-fading-cuba-03.jpg) sichtbar wäre. Da sich die Bilder aber überblenden sollen und somit den visuell den Eindruck hinterlassen, dass diese ineinander übergehen, muss wird im nächsten Schritt diesem Element die CSS3 Eigenschaft Animation hinzugefügt.

CSS3 Tutorial - Step 3: Anlegen der Animationseigenschaften

Das gewünschte Verhalten von zu überblendenden Bildern, den sogenannten "fading images", kann über verschiedene Wege erreicht werden. Bei Interaktionen durch den Anwender, wie MouseOver oder bei Berührung mit dem Finger (Touchgesten) bei mobilen Endgeräten wie einem Tablet oder Smartphone, könnte man auch das CSS3 Module Transitions verwendenden, denn dann kann man der jeweiligen Aktion, bspw. mit :hover, individuelle neue Eigenschaften wie eine Überblendung zukommen lassen. In unserem heutigen Fall, soll dieser Effekt aber auch ohne Aktion durch den Betrachter ablaufen. Daher fällt an dieser Stelle die Wahl auf das CSS3 Module Animation. Mit dem Wert "ease-in-out" für den zeitlichen Verlauf der Animation, wird eine kubische Bezierkurve beschrieben, nach welcher die entsprechenden Zwischenwerte der Animation berechnet und das Verhalten bei der Einblendung der Elemente ausgeführt werden. Da diese Animation unbegrenzt sein soll, wird die Eigenschaft animation-iteration-count mit dem dazugehörigen Wert "infinite" verwendet. Sollte die Animation nur einmalig ausgeführt werden, ist kein Wert notwendig und diese Zeile könnte entfallen. Die letzte Zeile ist sicherlich am leichtesten zu verstehen - sie gibt lediglich die Dauer für einen "Durchlauf der Animation" an. In diesem Fall sind dies, um den Effekt des Überblendens noch ein wenig zu verlängern, exakt 30 Sekunden.

Fading Images
#stage img {
  ...
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration:30s;
}

Hinweis: Um aktuell vollste Unterstützung dieser Eigenschaft zu erlangen ist es wichtig, dass ihr für CSS3 Animations explizit alle Browser mit den entsprechenden Vendor-Prefixes (bspw. -webkit-, -moz- ) anlegt. Wer vorausschauend arbeitet, könnte dies auch für -ms- (Internet Explorer) oder -o- (Opera) tun. So wäre eine größtmögliche Kompatibilität für diesen Effekt gewährleistet und das auch wenn die Browser(versionen) etwas älter sein sollten. Einige der aktuellen Browser (wie bspw. Google Chrome), verstehen in der Regel diese Eigenschaft auch bereits ohne Vendor-Prefix. Der besseren Lesbarkeit der Eigenschaften dieses CSS3 Tutorials geschuldet, werden an dieser Stelle nicht alle möglichen Vendor-Prefix-Schreibweisen mit aufgeführt. Das am Ende verlinkte Beispiel dieses Tutorials, besitzt hingegen sämtliche Vendor-Prefixe, damit all diejenigen die einen Browser mit Unterstützung dieser CSS3 Eigenschaft besitzen, dieses auch ansehen können. In diesem Blog sind dies aktuell immerhin knapp 90%. Als nächstes definieren wir nun noch einen Namen für diese Animation. Diesem werden dann im weiteren Verlauf die entsprechenden Eigenschaften zugewiesen. Der Einfachheit halber und zum besseren Verständnis werden die einzelnen drei Animationen durchnummeriert (jedes Bild bekommt also eine "eigene Animation" zugewiesen). Hierfür verwenden wir die Pseudoklasse nth-of-type, mit deren Hilfe es möglich ist, dass n-te gleichartige Elementes zu selektieren.

Fading Images
#stage img:nth-of-type(1) {
  animation-name: fadingAnimation01;
}
#stage img:nth-of-type(2) {
  animation-name: fadingAnimation02;
}
#stage img:nth-of-type(3) {
  animation-name: fadingAnimation03;
}


Auf diese Weise wird der Einsatz von Klassen für die einzelnen Bilder unnötig und man behält seinen performanten HTML-Code.

CSS3 Tutorial - Step 4: Anlegen der Animation für eine Überblendung

Als nun letzten Schritt, wird den drei stattfindenden Animtionen (jedes Bild besitzt einen eigenen Ablauf der Animation), die ihr jeweiliger Zustand der Einblendung zugewiesen. Wie bereits oben erwähnt gibt es fast immer verschiedene Wege zum Ziel zu gelangen, so auch in diesem Fall. Um den ablauf einer Animation und den Überblendungseffekt am besten beschreiben zu können und somit hoffentlich verständlich zu machen, habe ich mich dazu entschlossen diesen Überblendungseffekt (fading images) über das Verändern der Transparent (opacity) zu realisieren. Das heißt, die einzelnen Bilder werden zu entsprechenden Zeitpunkten der 30 sekündigen Animation werden über diese Eigenschaft, ein- bzw. ausgeblendet. Der "raffinierte" daran ist, dass bevor die erste Abbildung (fadingAnimation01) nach 16% der Animation beginnt sich bis zu 33% der Animation auszublenden, beginnt im Gegensatz das zweite Bild (fadingAnimation01) ab 16% der Animation sich bis zu 33% der Animation einzublenden. Bei circa. 25% der Animation ist somit das erste Bild zur Hälfte bereits "transparent geworden", während die zweite Abbildung zu diesem Zeitpunkt zur Hälfte bereits "sichtbar" geworden ist (siehe Abbildung 02). Der Wechsel von zweiten zum dritten und vom dritten zum ersten Bild, findet auf identische Weise statt - nur eben zu einem späteren Zeitpunkt der 30 Sekunden dauernden Animation.

Fading Images - Animationsverhalten
@keyframes fadingAnimation01 {
  0%  { opacity:1;}
  16%  {opacity:1;}
  33%  {opacity:0;}
  50%  {opacity:0;}
  67%  {opacity:0;}
  84%  {opacity:0;}
  100%  {opacity:1;}
}
@keyframes fadingAnimation02 {
  0%  { opacity:0;}
  16%  {opacity:0;}
  33%  {opacity:1;}
  50%  {opacity:1;}
  67%  {opacity:0;}
  84%  {opacity:0;}
  100%  {opacity:0;}
}
@keyframes fadingAnimation03 {
  0%  { opacity:0;}
  16%  {opacity:0;}
  33%  {opacity:0;}
  50%  {opacity:0;}
  67%  {opacity:1;}
  84%  {opacity:1;}
  100%  {opacity:0;}
}


Ich hoffe die Vorstellung der Umsetzung dieses zwar bereits bekannten visuellen Effektes der "fading images" auf Basis von CSS3 Animation hat Euch gefallen.

Abb. 2: Zustand bei der Überblendung vom ersten zum zweiten Bild

Wer mehr über solche Animationen auf Basis von CSS3 erfahren möchte, dem kann ich nur wärmstens mein aktuelles Buch Modernes Webdesign mit CSS empfehlen, hier wimmelt es nur so vor CSS3 ;o)

Fading Images Tutorial

Browser Support dieses CSS3 Tutorials

Fairerweise muss man natürlich auch die Browserunterstützung erwähnen, die sich für das CSS3 Animation Module von Google Chrome, über Safari bis hin zum Firefox erstreckt. Von den relevanten Browsern unterstützen ohne JavaScript Opera und der Internet Explorer diese Eigenschaft (noch) nicht.

Browserunterstützung des CSS3 Animation Module

Ich hoffe Euch hat dieses kleine CSS3-Tutorial gefallen und vielleicht dazu beigetragen, ein wenig über den bisher bekannten Tellerrand, JavaScript-basierte Überblendungen, zu schauen. In diesem Sinne, viel Spaß und viel Erfolg im Umgang mit CSS!

Weitere Artikel zum Thema CSS3 Animation

• CSS3-Keyframe-Animationen
• CSS Animations - The PONG Game - Firefox folgt Chrome und Safari
• CSS Animation - Morphing Element