Fade in - Fade out per Javascript
Dienstag, 4. März 2008
Sanftes Ein- und Ausblenden von Grafiken - und anderen Inhalten. Von Flash Animationen wohl bekannt, oder auch mit Hilfe von Java Applets.
Wer auf beide Techniken verzichten will, und im Netz nach alternativen Möglichkeiten sucht, stößt ganz schnell auf eine Javascript Technik namens nereidFade. Und als nächstes auf den Hinweis: "Grundsätzlich ist dieser Effekt nur mit dem Internet Explorer möglich."
Ich hab’ mir das Script mal vorgeknöpft, und für alle modernen Browser umgeschrieben. Und gleich noch mit einem horizontalen Autoscroll verbunden.
Zu sehen auf meiner aktuellen Spielwiese.
Achtung! DSL sollte schon sein. Die Seite ist wegen der eingebundenen Bilder 350 kB schwer.
Für die Nutzer langsamerer Internetanbindungen gibt es als Entschädigung ein kleines gimmick: Eine flash-like Ladeanzeige.
Wer sich für die Technik interessiert:
Das Ganze spielt sich in einem iframe ab: http://www.the-magics.de/fade_scroll.html. Der Quellcode ist ausreichend dokumentiert.
Geeignet ist diese Technik zur Präsentation einiger weniger Bilder, aber ganz bestimmt nicht als Fotoalbum.
2 Kommentare
Einen Kommentar abgeben
XHTML erlaubt: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote> <code> <em> <i> <strike> <strong>
Code-Beispiele
Damit Code-Beispiele richtig angezeigt werden, müssen Sonderzeichen maskiert werden (z.B. < zu <).

Und wo bekomme ich den Java Code?
Kommentar von Nicolas — Donnerstag, 8. Dezember 2011 - 13:41 Uhr
@Nicolas:
Normalerweise ist das Einsehen und Kopieren von Quelltext nicht die feine Englische Art. Aber weil vom Seiteninhaber hier ja extra erlaubt und explizit dazu aufgefordert wird:
Rechte Maustaste –> Seitenquelltext anzeigen
Manchen Leuten muss man noch den A.. abwischen, wenn sie von Toilette kommen und versuchen mit ihrem Unwissen und ihrer Phantasielosigkeit eine Webseite zu erstellen …
Kommentar von Kira — Mittwoch, 18. Januar 2012 - 7:14 Uhr