Bilder langsam überblenden
7. März 2009 von Thomas | 10 Kommentare
In seinem Artikel bei drweb zeigt Rene Schmidt, wie man zwei Bilder mit Hilfe von jQuery langsam überblenden lassen kann. Beispiel
Die Bilder werden zunächst per CSS übereinandergelegt und die Reihenfolge mit z-index festgelegt. Das obere ist zu Beginn transparent.
Die Überblendung wird mit der jQuery-Methode animate bewerkstelligt.
Noch eine Demo, in der die Funktion wunderbar dargestellt wird.
Das ganze funktioniert ohne Ruckeln und läuft sogar im IE.
1. Marc
Kommentar vom 7. März 2009 um 12:05
Das sieht echt richtig gut aus, muss mir das Ganze mal richtig in Ruhe anschauen, aber nach so einer Möglichkeit suche ich schon länger, scheinbar habe ich jetzt endlich das passende gefunden. Danke für den Post.
2. Christian
Kommentar vom 8. März 2009 um 16:09
Das ist doch nur eine Spielerei oder? Das macht doch eigentlich gar keinen rechten Sinn wenn ich mir das ganze so ansehe und genau darüber nachdenke. Ich wüsste jetzt ehrlich gesagt nicht genau wo ich das einsetzen sollte. Also sinnvoll meine ich. Ich finde es sieht nicht schlecht aus, das muss man schon sagen, aber wo ist der Nutzen? Ist da überhaupt einer da oder ist das wirklich nur zum reinen Vergnügen? Für was setzen sie das denn ein wenn ich mal fragen darf?
3. Thomas
Kommentar vom 8. März 2009 um 17:31
Klar, übertreiben sollte man das Ganze natürlich nich. Aber so denzent im Hintergrund wie beispielsweise auf http://www.esthesis-kiel.de/ kommt das schon ganz gut, denk ich mal.
4. Spieleregal
Kommentar vom 9. März 2009 um 02:01
diese Effekte sehen auch gut aus, solange man das alles auch in Rahmen lässt. Denn dieser ganze Javascript-Code etc. macht nur den Quellcode unnötig Fett und lang.
5. Stefan
Kommentar vom 24. Juli 2009 um 15:40
Weiss jemand wie man den Intervall steuern kann, s daß das erste Bild 2 Sek. dauert bis es startet und dann alle 4 sek. eine Überblendung statt findet? Wen ich den Intervall mit 2000 starte und animate auf 4000 setze gibt es voll den Hickhack. Hat wer Rat?
6. Thomas
Kommentar vom 24. Juli 2009 um 15:54
Der Intervall sollte eher nicht zu hoch gewählt werden und die ganze Sache hängt auch noch vom Browser bzw. vom Rechner ab, auf dem der Browser läuft. Je weniger Ressourcen vorhanden sind desto eher ruckelt etwas.
7. Stefan
Kommentar vom 24. Juli 2009 um 16:53
Hallo Thomas, danke für Deine Antwort. Aber das beantwortet meine Frage nicht
. In der Demo ist die Animation auf 2 Sek. eingestellt. Ich möchte einfach das das erste Bild wenn man die Seite betritt, nach 2 Sek. startet. Die Überblendanimation soll danach dann aber immer 4 sek. laufen. Weil die Animation sonst zu schnell läuft. Nur das funktioniert so nicht mit setInterval und animate wenn ich dementsprechend die Zahlen ändere. Auch nicht wenn ich setinterval auf 1sek. und animate auf 2sek. stellen – anscheinend müssen beide Werte immer die gleichen sein. Sorry, bin leider kein JS Experte.
8. Thomas
Kommentar vom 25. Juli 2009 um 10:43
Mal grob ausgedrückt funktioniert das so:
Mit setInterval() sagst du in welchen Abständen die Überblendung ablaufen soll. Nun wird sozusagen “innerhalb” von setInterval() die Funktion animate() aufgerufen.
Wenn nun die “Animation” länger dauert will ja setInterval() schon wieder losrackern. Dabei überschneidet sich der ganze Haufen…
9. Mr. Mac
Kommentar vom 2. Dezember 2010 um 22:04
Leider sind die Links tot
404 lässt Grüssen…
10. Thomas
Kommentar vom 2. Dezember 2010 um 22:08
Naja, der Beitrag ist von März 2009…
Leider “praktiziert” Dr. Web nicht mehr.