CSS scrollgetriebene Animationen

Das Modul CSS scrollgetriebene Animationen bietet Funktionalität, die auf dem CSS Animationsmodul und der Web Animations API aufbaut. Es ermöglicht Ihnen, Eigenschaftswerte basierend auf einem Fortschritt entlang einer scrollbasierten Zeitachse zu animieren, anstatt der standardmäßigen zeitbasierten Dokumenten-Zeitachse. Das bedeutet, dass Sie ein Element animieren können, indem Sie ein scrollbares Element scrollen, anstatt nur durch den Zeitverlauf.

Es gibt zwei Arten von scrollbasierten Zeitachsen:

• scroll Fortschritt-Zeitachse: Sie bewegen diese Zeitachse, indem Sie ein scrollbares Element (Scroller) von oben nach unten (oder von links nach rechts) und wieder zurück scrollen. Die Position im Scrollbereich wird in einen Fortschrittsprozentsatz umgewandelt — 0% am Anfang und 100% am Ende.
• Ansichtsfortschritt-Zeitachse: Sie bewegen diese Zeitachse basierend auf der Änderung der Sichtbarkeit eines Elements (bekannt als Subject) innerhalb eines Scrollers. Die Sichtbarkeit des Subjects innerhalb des Scrollers wird als Prozentsatz des Fortschritts verfolgt — standardmäßig befindet sich die Zeitachse bei 0%, wenn das Subject zuerst an einem Rand des Scrollers sichtbar ist, und bei 100%, wenn es den gegenüberliegenden Rand erreicht.

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

Es ist möglich, die effektive Platzierung der Animation entlang der scroll- und Ansichtsfortschritt-Zeitachsen anzupassen, d.h. Sie können die Position definieren, an der die Animation startet und endet. Dies kann auf verschiedene Weise geschehen:

• Start- und Endwerte des Animationsbereichs können auf die Animation angewendet werden, um die Start- und Endposition der Animation entlang der Zeitachse anzupassen.
• Ansichtsfortschritt-Zeitachsen können einen Start- und/oder Endeinschub (oder -auszug) aufweisen, um die Position des Scrollports anzupassen (siehe Scroll container für weitere Details), in dem das Subject-Element als sichtbar gilt. Anders ausgedrückt, dies ermöglicht Ihnen die Festlegung von Start- und/oder Endeinschub- (oder -auszug) Werten, die die Position der Zeitachse selbst versetzen.