Frage von RhoMalV, 29

Wie nennt man bei Webseiten den Fade-In-Effekt während dem Scrollen?

Hallo,

es gibt ja immer mehr Webseiten, wo unterhalb des Anzeigebereichs vom Bildschirm die Inhalte durch einen Fade-In-Effekt von der Seite oder von unten ins Bild eingefahren kommen, sobald man sich mit dem Scrollbalken auf Höhe dieses Inhaltsbereichs befindet.

Weiß jemand, wie man diesen Effekt nennt und wo man gute Anleitungen findet, soetwas zu programmieren?

Danke schon mal.

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von Geldon, 18

Habe ich schon in einige Projekte verbaut.
Was du suchst ist ca. das hier:

1. animate.css mit wow.js gekoppelt. (Google wow.js - ist heute glaube ich nicht mehr MIT-licensed)

2. AnimateIt
http://jackonthe.net/css3animateit/
https://github.com/Jack-McCourt/css3-animate-it

Die Installation ist bei beiden easy und dokumentiert, meist nur 1 JS zum triggern und 1 CSS für animations.

Diese libraries hier zu nutzen kommt am Ende wesentlich leichter und schneller als eigene animationen zur erstellen und onscroll zu callen.

Wünsche viel Erfolg.

Kommentar von medmonk ,

(Google wow.js - ist heute glaube ich nicht mehr MIT-licensed)

wow.js kommt nicht von Google, sondern von Matthieu Aussaguel und darf für private Zwecke kostenlos genutzt werden. Lediglich für kommerzielle Projekte benötigt man eine kostenpflichtige Lizenz (29-99 $).

Diese libraries hier zu nutzen kommt am Ende wesentlich leichter und schneller als eigene animationen zur erstellen und onscroll zu callen.

Auch wenn es für weniger versierte User leichter ist, man auch solche Bibliotheken nicht blind hinzufügen sollte. Den genau jene können gerade bei größeren Projekten stark an der Performance nagen. Daher wirklich nur das nutzen, was man tatsächlich benötigt. Das gilt für wow.js ebenso wie für animateit.css.

Was jetzt die eigentlich Frage angeht, vielleicht mal geklärt werden sollte, was genau gewünscht ist oder ob beides gewollt ist. Quasi »lazy loading« mit fade-in/out Animation oder nur eines von beiden. 

LG medmonk 

Antwort
von medmonk, 24

Weiß jemand, wie man diesen Effekt nennt und wo man gute Anleitungen findet, soetwas zu programmieren?

Was du suchst nennt sich »Lazy Loading«. Umsetzen kann man das Ganze mit Hilfe von JavaScript (jQuery). Entweder selber erstellen oder auf Dutzend frei verfügbare jQuery Plugins zurückgreifen. Hier mal ein Beispiel von vielen:

http://jquery.eisbehr.de/lazy/ 

Kommentar von RhoMalV ,

Hey! Besten Dank!

Kommentar von medmonk ,

Gern geschehen :)

Keine passende Antwort gefunden?

Fragen Sie die Community