CSS scrollgesteuerte Animationen

Das Modul für CSS scrollgesteuerte Animationen bietet Funktionalitäten, die auf dem CSS-Animationsmodul und der Web Animations API aufbauen. Es ermöglicht Ihnen, Eigenschaftswerte basierend auf einem Fortschritt entlang einer scrollbasierten Zeitleiste zu animieren, anstatt der standardmäßigen zeitbasierten Dokumentenzeitleiste. Das bedeutet, dass Sie ein Element durch das Scrollen eines scrollbaren Elements animieren können, anstatt nur durch den Zeitverlauf.

Es gibt zwei Arten von scrollbasierten Zeitleisten:

• Scroll-Fortschrittszeitleiste: Diese Zeitleiste wird fortschreiten, indem ein scrollbares Element (Scroller) von oben nach unten (oder von links nach rechts) und wieder zurück gescrollt wird. Die Position im Scrollbereich wird in einen prozentualen Fortschritt umgerechnet — 0% am Anfang und 100% am Ende.
• Sichtbarkeits-Fortschrittszeitleiste: Diese Zeitleiste schreitet auf Basis der Veränderung der Sichtbarkeit eines Elements (bekannt als Subjekt) innerhalb eines Scrollers fort. Die Sichtbarkeit des Subjekts innerhalb des Scrollers wird als prozentualer Fortschritt verfolgt — standardmäßig ist die Zeitleiste bei 0%, wenn das Subjekt am einen Rand des Scrollers erstmals sichtbar ist, und bei 100%, wenn es den gegenüberliegenden Rand erreicht.

Wenn eine dieser beiden Zeitleisten auf ein animiertes Element angewendet wird, schreitet die Animation entlang dieser Zeitleiste voran, anstatt der standardmäßigen zeitbasierten Zeitleiste zu folgen.

Es ist möglich, die effektive Platzierung der Animation entlang der Scroll-Fortschritts- und Sichtbarkeits-Fortschrittszeitleisten anzupassen, d.h. Sie können die Position definieren, an der die Animation beginnt und endet. Dies kann auf verschiedene Weise erfolgen:

• Start- und Endwerte des Animationsbereichs können auf die Animation angewendet werden, um die Position des Start- und Endpunkts der Animation entlang der Zeitleiste anzupassen.
• Sichtbarkeits-Fortschrittszeitleisten können einen Start- und/oder Endeinschnitt (oder Austritt) erhalten, um die Position des Scrollports anzupassen (siehe Scrollcontainer für weitere Details), in dem das Subjektelement als sichtbar angesehen wird. Anders ausgedrückt, dies ermöglicht es Ihnen, Start- und/oder Endeinschnittswerte (oder Austrittswerte) anzugeben, die die Position der Zeitleiste selbst verschieben.