Daumenkino mit jQuery
Ein Foto sanft in ein anderes überzublenden, ist ein schöner und dezenter Effekt. Mit ein paar HTML-, CSS- und Javascript-Grundlagen ist das schnell erledigt. Nur, wie es technisch funktioniert, ist auf Anhieb schwer vorzustellen, insbesondere für Designer mit wenig Programmiererfahrung. Dabei ist alles eigentlich ganz einfach. So soll es aussehen
Das sieht schon gut aus. Aber was läuft da genau ab? Ich habe eine zweite Seite gemacht, auf der das sicher etwas deutlicher wird. Zum besseren Verständnis habe ich die Bilder etwas versetzt angeordnet und ihnen jeweils eine besondere Rahmenfarbe gegeben. Das Bild mit dem roten Rahmen ist dasjenige, das gerade eingeblendet wird. Das Bild im gelben Rahmen ist das zuletzt sichtbare Bild, das Bild mit dem grünen Rahmen liegt ganz unten und spielt für den aktuell ablaufenden Vorgang keine Rolle.
So gehts
Wir haben drei Bilder, die wir nacheinander überblenden möchten. Sie befinden sich in einem DIV namens "bilderstapel".
<div id="bilderstapel">
<img id="bild2" src="http://example.com/42.jpg" alt="" class="obersteebene" />
<img id="bild1" src="http://example.com/42-2.jpg" alt="" />
<img id="bild3" src="http://example.com/42-3.jpg" alt="" />
</div>
Technisch funktioniert das so: Die Bilder werden per CSS zunächst übereinander gelegt. Es gibt drei verschiedene Ebenen, die per z-index definiert sind. Das Bild, zu dem übergeblendet werden soll, hat die CSS-Klasse "obersteebene" (roter Rahmen). In ihr ist definiert, dass das Bild auf der obersten Ebene liegt (z-index: 3) und komplett transparent ist, die Deckkraft (CSS-Attribut "opacity") ist also 0%. Ein darunter liegendes Bild hat die Deckkraft 100% (scheint durch) und ist für den Betrachter jetzt zu sehen (gelber Rahmen). Es hat den z-index 2. Das dritte Bild ist das Bild, das als letztes übergeblendet wird. Es hat den z-index 1 und einen grünen Rahmen.
Zunächst wird das Bild mit der CSS-Klasse "obersteebene" ausgewählt und in der Variable $alt gespeichert. Direkt danach wird das Bild ausgewählt, zu dem übergeblendet werden soll - entweder das nächste benachbarte Bild, oder, falls keines mehr existiert, das erste Bild des DIVs "bilderstapel". Dieses Bild ist in $neu zu finden. Das Bild $alt wird dann auf die mittlere Ebene gesetzt. Das Bild $neu, zu dem wir überblenden möchten, bekommt die Deckkraft 0% zugewiesen und wird auf die oberste Ebene geschickt. Es ist jetzt komplett transparent, das Bild darunter scheint durch. Jetzt beginnt die Überblendung mit der Methode animate() von jQuery. Die Deckkraft wird langsam von 0% auf 100% erhöht.
function daumenKino() {
var $alt = $('#bilderstapel IMG.obersteebene');
if($alt.next().length)
var $neu = $alt.next();
else
var $neu = $('#bilderstapel IMG:first');
$alt.addClass('mittlereebene');
$alt.removeClass('obersteebene');
$neu.css({opacity: 0.0});
$neu.addClass('obersteebene');
$neu.animate({opacity: 1.0}, 2000, function() {
$alt.removeClass('mittlereebene');
});
}
Danach ist die Überblendung abgeschlossen. Das oberste Bild hat nun 100% Deckkraft und überlagert alle anderen Bilder. Wenn nun das nächste Bild eingeblendet werden soll, kann der ganze Vorgang einfach ohne veränderte Parameter neu gestartet werden. Die Funktion daumenKino() wird über setInterval() periodisch angestoßen:
$(document).ready(function() {
setInterval( "daumenKino()", 2000 );
});
Mehr über animate() finden Sie in der englischen Dokumentation von jQuery. Wenn Sie den Effekt selbst einsetzen möchten: In der Beispieldatei finden Sie alles, was Sie dazu benötigen. Viel Spaß und viel Erfolg! (tm)
Über René Schmidt
Verwandte Artikel
(No Ratings Yet)
Gruß an alle!
