Einfache Bildübergänge mit CSS3

© Internet Magazin

Beispiel 3: Bilder hineinschieben

Ein weiterer schöner Effekt ergibt sich beim Hinein- und Herausschieben von Bildern, wenn also das neue Bild das ursprüngliche Bild wegschiebt. Dieser Effekt kommt beispielsweise auch bei Web-Apps für das Wechseln der Seiten zum Einsatz.

Dafür brauchen wir eine etwas andere HTML-Struktur. Wir benötigen zwei umfassende Elemente. Im Beispiel hat das eine die Klasse .bildcontainer, das innere die Klasse .bilder.

Die Idee ist folgende: Innerhalb von .bilder werden alle Bilder nebeneinander angeordnet. Dafür dass nicht alle gleichzeitig sichtbar sind, sorgt .bildcontainer, der den sichtbaren Bereich definiert und so groß ist wie eine einzelnes Bild: Es ist wie ein Guckloch, durch das man einen Ausschnitt aus dem größeren bilder-Element sieht.

Das bilder-Element dahinter wird hin- und hergeschoben, so dass mal das eine, mal das andere Bild erscheint.

Vielleicht kennen Sie die Technik CSS-Sprites, bei der mit einem großen Hintergrundbild gearbeitet wird, von dem immer nur ein Ausschnitt zu sehen ist, was dadurch gesteuert wird, dass man die Hintergrundposition verändert.

Ähnlich ist es auch in unserem Fall, nur dass wir es mit Vordergrundbildern zu tun haben und dass die Positionsveränderungen der Bilder sichtbar sein sollen - eben animiert, damit sie als ein Schieben wahrgenommen werden. Beginnen wir mit der HTML-Struktur: Im .bildcontainer befindet sich das .bilder-Element mit den img-Elementen.

<div class="bildcontainer"><div class="bilder"><img src="landschaft_01.jpg"
alt="landschaft 1" class="unten" /><img src="landschaft_02.jpg"
alt="landschaft 2" class="oben" /></div></div>

.bildcontainer wird auf die Breite eines Bildes gesetzt und außerdem mit position: relative versehen. Zusätzlich erhält es die Angabe overflow: hidden. Dadurch werden Inhalte, die größer sind als die angegebenen Ausmaße, einfach abgeschnitten - wichtig für den Guckloch-Effekt.

.bildcontainer {
width: 300px;
height: 225px;
overflow: hidden;
position: relative;
}

Jetzt geht es an die Formatierung des inneren .bilder-Elements. Es erhält als Breite die Gesamtbreite der Bilder. Im Beispiel werden zwei 300 Pixel breite Bilder verwendet, was 600 Pixel ergibt. Außerdem wird dieser Bereich absolut positioniert und mit left: 0px links angeordnet. Zusätzlich sind hier die Übergänge definiert:

.bilder {
height: 225px;
width: 600px;
position:absolute;
left: 0px;
/* Angaben mit den Praefixen ausgelassen
*/
transition: all 1s;
}

Die img-Elemente werden in .bilder über float: left nebeneinander angeordnet:

.bilder img {
float: left;
}

Damit ist alles vorbereitet. Der umfassende .bildcontainer ist nur so groß, dass man immer genau ein Bild sehen kann. Darin befindet sich das .bilder-Element, das so groß ist, dass alle Bilder nebeneinander Platz haben.

Von den dort nebeneinander angeordneten Bildern sieht man nur das erste. Beim Hovern soll jetzt das nächste Bild angezeigt werden. Dafür müssen wir die Angabe bei left manipulieren. Wenn Sie bei left einen negativen Wert schreiben, schieben Sie dadurch das Element nach links. Als Wert brauchen Sie genau eine Bildgröße:

.bilder:hover {
left: -300px;
}

Darüber wird das .bilder-Element genau um eine Bildbreite nach links bewegt. Die transition-Angaben bei .bilder bewirken, dass der Schiebevorgang sichtbar wird.

Voila - das Reinschieben klappt. Übrigens könnten Sie alternativ zur Verwendung von position: absolute und left zum Verschieben auch mit CSS3 Transforms translate() arbeiten.

Und die Browser?

Am wichtigsten ist, dass der Bildwechsel auch beispielsweise in älteren Internet Explorer zu sehen ist. Überall da, wo opacity involviert ist, können Sie für ältere Internet Explorer über filter nachbessern.

Beim letzten Beispiel mit dem Schiebeeffekt funktioniert die Anzeige der unterschiedlichen Bilder ebenfalls in älteren IEs, da die Verschiebung über position bewirkt wurde. Die Animationen und spürbaren Übergänge wurden in den Beispielen rein mit CSS3 Transitions und CSS3-Animationen realisiert.

Transitions und Animationen funktionieren in allen modernen Browsern, der IE zieht hier ab Version 10 mit; in Opera sind Transitions seit Version 10.5 implementiert, Animationen noch nicht. Damit die Animationen ebenfalls in älteren IE funktionieren, müsste man mehr Aufwand betreiben und etwa als Fallbacklösung zu jQuery greifen.

Mehrere Bilder beim Klick wechseln

Natürlich lassen sich diese Bildübergänge auch bei mehreren Bildern definieren. Sehen wir uns das einmal am Beispiel des Schiebeeffekts an. Dieses Mal sind drei Bilder involviert und es gibt drei Links. Beim Klick auf einen der Links wird jeweils das zugehörige Bild angezeigt. Der HTML-Code und der CSS-Code bleiben unverändert.

Zusätzlich gibt es einen Javascript-Part: In diesem werden die Links zum Durchblättern erzeugt und außerdem wird für das Einblenden des jeweils passenden Bildes gesorgt - durch die entsprechende Angabe für left. Die Links zum Blättern werden eingefügt:

$(".bildcontainer").after('<a href=
"#" id="eins">1</a><a href="#" id=
"zwei">2</a><a href="#" id=
"drei">3</a>');

Das Element mit der Klasse bilder wird häufiger benötigt und deswegen in einer Variablen gespeichert:

var $bilder = $(".bilder");

Dann müssen noch die Klicks auf die erzeugten Links abgefangen und hier immer der Wert für left angepasst werden. Den Wert -300px hatten wir schon zum Einblenden des zweiten Bildes; entsprechend zeigt -600px (noch einmal die Breite eines Bildes dazu) das dritte Bild an.

$("#eins").click(function()
{$bilder.css("left","0"); });
$("#zwei").click(function()
{$bilder.css("left","-300px"); });
$("#drei").click(function()
{$bilder.css("left","-600px"); });

Eine andere Möglichkeit wäre, den Wechsel fortlaufend über Animations festzulegen.

Das könnte Sie auch interessieren

Bildübergänge elegant gestalten mit CSS3