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

... komplette Frage anzeigen

2 Antworten

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.

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von medmonk
06.08.2016, 05:12

(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 

0

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/ 

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von RhoMalV
04.08.2016, 23:06

Hey! Besten Dank!

0

Was möchtest Du wissen?