CSS scroll-basierte Animationen

Das CSS-Modul für scroll-basierte 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 anstelle der standardmäßigen zeitbasierten Dokumenten-Zeitleiste zu animieren. Das bedeutet, dass Sie ein Element durch das Scrollen eines scrollbaren Elements animieren können, anstatt lediglich durch den Zeitablauf.

Es gibt zwei Arten von scrollbasierten Zeitleisten:

• Scroll-Fortschritts-Zeitleiste: Sie schreiten auf dieser Zeitleiste voran, indem Sie ein scrollbares Element (Scroller) von oben nach unten (oder von links nach rechts) und zurück scrollen. Die Position im Scrollbereich wird in einen Fortschrittsprozentsatz umgewandelt — 0% am Anfang und 100% am Ende.
• Sichtbarkeits-Fortschritts-Zeitleiste: Diese Zeitleiste basiert auf der Änderung der Sichtbarkeit eines Elements (bekannt als Subjekt) innerhalb eines Scrollers. Die Sichtbarkeit des Subjekts innerhalb des Scrollers wird als Fortschrittsbestandteil verfolgt — standardmäßig ist die Zeitleiste bei 0%, wenn das Subjekt erstmals an einem Rand des Scrollers sichtbar ist, und 100%, wenn es den gegenüberliegenden Rand erreicht.

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

Es ist möglich, die effektive Platzierung der Animation entlang der Scroll-Fortschritt- und Sichtbarkeits-Fortschritts-Zeitleisten anzupassen, d.h. Sie können die Position definieren, an der die Animation beginnt und endet. Dies kann auf ein paar verschiedene Arten geschehen:

• 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-Fortschritts-Zeitleisten können einen Start- und/oder End-Absatz (oder Auszug) enthalten, um die Position des Scrollports (siehe Scroll-Container für weitere Details) anzupassen, in dem das Subjektelement als sichtbar erachtet wird. Anders gesagt, dies ermöglicht es Ihnen, Start- und/oder End-Absatz-/Auszugswerte zu spezifizieren, die die Position der Zeitleiste selbst versetzen.