Bildübergänge elegant gestalten mit CSS3
Transparenzen und Transformationen lassen sich gut mit CSS3 Transitions kombinieren, um schöne Bildübergänge zu erzeugen. Wir zeigen, wie.
Klassischerweise verwendet man für Bildübergangseffekte Javascript. Allerdings lassen sich viele Effekte auch direkt mit CSS3 realisieren. Javascript benötigt man eventuell nur, um eine Klasse auszutauschen, aber die eigentliche Animation wird über CSS3 umgesetzt. Der Vorteil: Die CSS3-Effekte s...
Klassischerweise verwendet man für Bildübergangseffekte Javascript. Allerdings lassen sich viele Effekte auch direkt mit CSS3 realisieren. Javascript benötigt man eventuell nur, um eine Klasse auszutauschen, aber die eigentliche Animation wird über CSS3 umgesetzt. Der Vorteil: Die CSS3-Effekte sind ressourcensparender.
Im Artikel sehen Sie das Prinzip von drei Arten von Bildübergängen: einen Überblendeffekt, einen weiteren mit zusätzlicher Größenänderung und zuletzt das Hereinschieben des Bildes.
Die einfachen Beispiele demonstrieren die Effekte anhand von zwei Bildern, die beim Hover ausgewechselt werden. Sie erfahren aber auch, wie Sie einen Wechsel beim Klicken definieren, durch CSS3-Animationen automatisch ablaufen lassen und außerdem Bildübergänge für mehrere Bilder einsetzen.
Beispiel 1: Änderung der Transparenz
Der erste Effekt ist ein klassischer Überblendeffekt: beim Hovern wird das zu Anfang sichtbare Bild ausgeblendet und gleichzeitig das andere eingeblendet. Dafür ist die Eigenschaft opacity prädestiniert, über die Sie die Transparenz von Elementen bestimmen. Mit opacity: 0.5 ist ein Element halbtransparent, mit opacity: 0 ganz unsichtbar.
Beginnen wir mit dem HTML-Code. Die Bilder befinden sich in einem umfassenden Element. Damit Sie sie komfortabel ansprechen können, haben sie Klassen:
<div class="bildcontainer"><img src="landschaft_01.jpg" alt=
"landschaft 1" class="unten" /><img src="landschaft_02.jpg" alt=
"landschaft 2" class="oben" /></div>Die Bilder müssen übereinander angeordnet werden. Als Erstes muss dafür der umfassende Bildcontainer formatiert werden. Er erhält die Angabe position: relative, damit er als Bezugspunkt für die spätere absolute Positionierung seiner Kindelemente dienen kann. Außerdem wird er auf die Ausmaße eines Bildes gesetzt, das im Beispiel 300 mal 225 Pixel groß ist:
.bildcontainer {
width: 300px;
height: 225px;
position: relative;
}Die beiden Bilder werden übereinander platziert, indem sie beide position: absolute erhalten.
In diesem Fall ist das Bild zuoberst, das zuletzt im Quellcode steht.
.oben, .unten {
position: absolute;
top: 0;
left: 0;
}Beim Hovern soll das obere Bild verschwinden und das untere Bild angezeigt werden. Das erreichen Sie dadurch, dass Sie beim Hovern für das obere Bild opacity: 0 definieren: Damit ist es komplett durchsichtig und das darunterliegende Bild ist zu sehen.
.oben:hover {
opacity: 0;
}Schöner Übergang
Nun fehlt aber noch der gemächliche Übergang zwischen den beiden Zuständen, das langsame und damit wahrnehmbare Überblenden. Dafür gibt es die CSS3-Eigenschaft transition, die Sie beim Ursprungszustand angeben. Hinter transition bestimmen Sie die Eigenschaft, die in den Übergang mit einbezogen werden soll, und die Dauer des Übergangs.
Zusätzlich könnten Sie noch die Art des Übergangs spezifizieren, ob es beispielsweise Beschleunigungen am Anfang oder Ende geben soll. In unserem Beispiel ist dies weggelassen, daher gilt der Standardwert ease.
.oben, .unten {
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
transition: opacity 1s;
}Wie Sie am Beispiel sehen, müssen Sie die transition-Eigenschaft mit allen herstellerspezifischen Browserpräfixen schreiben. Und das war es schon - der Überblendeffekt steht.
Wechsel per Klick
Bei der derzeitigen Variante findet der Bildwechsel beim Hovern statt, das ist die einfachste und schnellste Möglichkeit, um eine Transition zu starten und das Grundprinzip von Bildübergängen zu zeigen. Aber selbstverständlich kann der Effekt auch durch andere Benutzeraktionen ausgelöst werden, beispielsweise beim Klick auf ein Element.
Das Prinzip ist folgendes: Beim Klick auf das entsprechende Element wird einem anderen Element eine Klasse hinzugefügt. Dieses Hinzufügen der Klasse erledigen Sie am besten mit Javascript - die Animation/Transition bleibt aber fest in CSS3-Hand. Der HTML-Code ist derselbe wie vorhin.
Aber im CSS-Code gibt es eine Änderung: Die Angabe opacity: 0 steht jetzt nicht bei :hover, sondern nun gibt es eine eigene Klasse mit dem passenden Namen .unsichtbar:
.unsichtbar {
filter: progid:DXImageTransform.
Microsoft.Alpha(Opacity=0);
opacity: 0;
}Zusätzlich wurde im Beispiel eine Filterangabe ergänzt, die bewirkt, dass das Ausblenden auch im IE 8 und älter funktioniert, wo opacity noch nicht implementiert ist. Per Javascript müssen Sie jetzt dafür sorgen, dass ein Klick auf den dafür vorgesehenen Link die Klasse unsichtbar beim Bild mit der Klasse .oben hinzufügt oder entfernt.
Mit jQuery geht das folgendermaßen:
$(function() {
$(".bildcontainer").after('<a href=
"#" id="wechsel"> bildwechsel </a>');
$("#wechsel").click(function() {
$(".oben").toggleClass("unsichtbar");
});
});Außerdem sehen Sie, dass am Anfang der Link mit Javascript erzeugt wird:
$(".bildcontainer").after('<a href=
"#" id="wechsel">bildwechsel</a>');Der jQuery-Befehl after() hängt den angegebenen HTML-Code hinter das Element, das durch den in Klammern angegebenen Selektor ausgewählt ist. Da der Bildwechsel nur stattfindet, wenn Javascript aktiviert ist, sollte das zugehörige Bedienelement auch nur dann zu sehen sein.
toggleClass() ist für den eigentlichen Effekt zuständig: Es sorgt dafür, dass die angegebene Klasse immer abwechselnd hinzugefügt und entfernt wird. Wie gesagt, wird in diesem Beispiel Javascript für das Hinzufügen der Klasse eingesetzt, aber nicht für die Animation.
Außerdem haben Sie gesehen, dass Sie durch eine zusätzliche Filterangabe dafür sorgen können, dass der Bildwechsel auch bei älteren IEs klappt. Der zusätzliche Überblendeffekt funktioniert im Internet Explorer ab Version 10.
Wechsel per CSS3-Animations
Alternativ zur Verwendung von Transitions können Sie CSS3-Animationen einsetzen und beispielsweise den Überblendeffekt automatisch ablaufen lassen.
Der grundlegende Code bleibt wie gehabt, die Angaben zu den Transitions werden jedoch gestrichen. Dann definieren Sie die Animation - im Beispiel sehen Sie die Angaben für den Firefox:
.unsichtbar {
filter: progid:DXImageTransform.
Microsoft.Alpha(Opacity=0);
opacity: 0;
}Die Animation hat den Namen bildwechsel erhalten. In bildwechsel wird festgelegt, dass am Anfang (0 Prozent) die Transparenz auf 0 sein soll, am Schluss (100 Prozent) auf 1. Diese Definition der Animation müssen Sie für Webkit-Browser (@-webkit-keyframes bildwechsel) und für den IE 10 (@-mskeyframes bildwechsel) wiederholen. Danach können Sie die Animation einem Element zuweisen:
.oben {
-moz-animation-name: bildwechsel;
-moz-animation-duration: 10s;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function:
linear;
}Die Animation läuft im Beispiel einmal automatisch ab, wenn die Seite geladen ist, und sorgt für eine zehn Sekunden lange Überblendung des einen Bildes in das andere. Im Beispiel sind nur die Angaben mit dem Präfix für den Firefox aufgeführt, entsprechende Codezeilen brauchen Sie auch für Webkit-Browser und den IE 10.
Beispiel 2: Übergang mit Größenänderung
Der bisher beschriebene Überblendeffekt war einfach, aber Sie haben anhand von Variationen gesehen, wann und wie der Effekt gestartet werden kann. Das nächste Beispiel bringt einen etwas elaborierteren Effekt, bei dem neben der Transparenz die Größe des Bildes animiert wird. Das neue Bild wächst und wird größer, während das ursprüngliche Bild kleiner wird und verschwindet.
Das Beispiel verwendet dieselbe HTML-Grundstruktur wie das vorherige: Es gibt ein umfassendes Element mit der Klasse .bildcontainer, in dem die Bilder stehen. Auch bei den Formatierungen ist der Anfang wie gehabt: Der umfassende Container wird auf die Größe eines Bildes gesetzt ...
.bildcontainer {
width: 300px;
height: 225px;
position: relative;
}... und die beiden Bilder werden mit position: absolute übereinander positioniert und der Übergang wird festgelegt.
.oben, .unten {
position: absolute;
top: 0;
left: 0;
/* Angaben mit den Praefixen
weggelassen */
transition: all 1s;
}Besser: CSS3 Transforms
Die Größenänderung könnte man mit height und width realisieren. Besser ist die Verwendung von CSS3 Transforms. Die in CSS3 definierten Tranformationen ermöglichen nicht nur ein Drehen (rotate), Verzerren (skew) und Verschieben (translate), sondern auch ein Skalieren über scale.
Bei scale geben Sie einen Faktor an, um wie viel das Bild vergrößert oder verkleinert werden soll. Über folgende Angabe hat ein Element das 0-Fache seiner Ausmaße, ist also nicht sichtbar:
transform:scale(0,0);Entsprechend lässt dieser Code ein Element auf seine doppelte Größe wachsen:
transform: scale(2, 2);Zurück zu unserem Beispiel: Das obere Bild soll zu Beginn ausgeblendet werden. Das wird auf zwei Arten erledigt: zum einen über opacity: 0 und zum anderen mit scale(0,0):
.bildcontainer img.oben {
-webkit-transform: scale(0,0);
-moz-transform: scale(0,0);
-o-transform: scale(0,0);
-ms-transform: scale(0,0);
transform: scale(0,0);
opacity: 0;
}Wieder müssen die Transformationsangaben mit allen herstellerspezifischen Präfixen geschrieben werden.
Beim Hovern soll das obere Bild angezeigt werden. Es benötigt hierfür opacity: 1 und außerdem soll es in seiner normalen Größe erscheinen, was transform: scale(1,1) bewirkt:
.bildcontainer:hover img.oben {
opacity: 1;
-webkit-transform: scale(1,1);
-webkit-transform-origin: top right;
-moz-transform: scale(1,1);
-moz-transform-origin: top right;
-o-transform: scale(1,1);
-o-transform-origin: top right;
-ms-transform: scale(1,1);
-ms-transform-origin: top right;
transform: scale(1,1);
transform-origin: top right;
}Im Beispiel wird über transform-origin festgelegt, dass der Bezugspunkt für die Größenänderung die obere rechte Ecke ist. Zusätzlich können Sie definieren, was das untere Bild beim Hovern machen soll - es soll verschwindend klein werden: scale(0,0). Als Bezugspunkt für diese Transformation/Skalierung wird bei diesem Bild bottom left gewählt, also unten links.
.bildcontainer:hover img.unten {
-webkit-transform: scale(0,0);
-webkit-transform-origin: bottom
left;
-moz-transform: scale(0,0);
-moz-transform-origin: bottom left;
-o-transform: scale(0,0);
-o-transform-origin: bottom left;
-ms-transform: scale(0,0);
-ms-transform-origin: bottom left;
transform: scale(0,0);
transform-origin: bottom left;}
