Sprung zum Inhalt [S] Tastaturkürzel / Accesskeys [0]
webdesign weisshart Startseite

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zur Liste der Kategorien | zum Archiv

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.
Ladeanzeige Animation 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

  1. Und wo bekomme ich den Java Code?

    Kommentar von Nicolas — Donnerstag, 8. Dezember 2011 - 13:41 Uhr

  2. @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:

    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.

    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

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 &lt;).


(notwendig)

(notwendig)

Spamschutz:
Je nach Inhalt wird Ihr Kommentar eventuell nicht sofort angezeigt, sondern muss manuell freigeschaltet werden.

Partnerseiten: barrierefreies WebDesign

Tastaturkürzel

zum Seitenanfang