Elemente animieren, wenn sie sichtbar werden - JavaScript IntersectionObserver Tutorial - Deutsch

Damit Animationen ihre Wirkung erzielen, muss der Nutzer sie auch sehen können. Idealerweise werden sie also erst abgespielt, wenn das jeweilige Element innerhalb des Anzeigebereiches liegt. Um das zu erreichen, gab es lange Zeit keine richtige Lösung, sodass man Umwege gehen musste, die nicht nur umständlich, sondern auch fehleranfällig waren. Das hat sich zum Glück mit der Einführung des IntersectionObservers geändert.

Deshalb schauen wir uns in diesem Video an, wie man mithilfe des Intersection Observers dafür sorgt, dass Animationen für Elemente erst gestartet werden, wenn sie in den Viewport kommen. Dabei verwenden wir eine ganz simple Fading-Animation, das gleiche funktioniert aber natürlich auch mit jeder anderen Animation.

00:00 Einleitung
00:18 Was ist der Intersection Observer?
01:00 Erstellen der Animation
02:34 Vorbereiten der JS Logik
03:24 Erstellen des IntersectionObservers
04:35 Wie sind IntersectionObserverEntries aufgebaut?
06:19 Implementieren des Callbacks für den IntersectionObserver
07:20 Angeben unterschiedlicher Schwellwerte für den IntersectionObserver
08:55 Abonniert den Kanal :)

Thumbnail Quellen:

Arrow
von lastspark
The Noun Project

[letsoverengineer]

Echt cool erklärt- habe gar nicht nach dem Thema gesucht, aber trotzdem angeschaut

[psychedelic-chi]

Hast mir sehr geholfen, vielen Dank! Abo ist raus ;-

[kuulopa]

HTML und CSS wunderbar erklärt, alles verstanden und realisiert, anfängergerecht. Danke dafür. Aber sind wir bei JS plötzlich fortgeschrittene Programmierer geworden? Vielleicht komme ich bei nächsten Videos zurecht.

[alexcharly]

was ist "eintrag" bei deinem foreach, wo kommt das her, auf was bezieht sich das?

[stkr]

Hi, cooles Video.
Bei mir funktioniert es leider
Die animation wird bei mir sofort getriggert und nicht erst wenn im viewport.
Habe alles so von dir übernommen...
Bin am verzweifeln!