Animation durch Scrollen

Hier wird wie gehabt eine Animation mit einer @keyframes Regel definiert und einem Element zugewiesen. Anstatt die Zeit zu definieren, werden Scrollleisten oder Scrollpositionen genutzt. Es gibt 2 Arten:

Zeitleiste für den Scrollfortschritt: Eine Zeitachse, die mit der Scrollposition eines Scrollcontainers entlang einer bestimmten Achse verknüpft ist.

Fortschritts-Zeitachse: Eine Zeitachse, die mit der relativen Position eines bestimmten Elements innerhalb seines Scroll-Containers verknüpft ist.

Zeitleiste für Scrollfortschritt

animation-duration

Normalerweise setzt man mit animation-duration die Zeitdauer fest. Will man eine Scroll-Animation erstellen, setzt man animation-duration: auto. Wenn animation-duration nicht gesetzt ist, bekommt es auch den für diesen Fall notwendigen Standardwert auto.

animation-timeline

Stattdessen wird die Eigenschaft animation-timeline mit einer scroll() Funktion eingesetzt. In dieser Scrollfunktion gibt es die beiden Parameter scroller und axis. Hier kann man verschiedene Argumente einsetzen. Lässt man diese weg, greifen die Standardwerte scroll(nearest block)

scroller

Der erste Parameter scroller von scroll kann folgende Werte bekommen:

• nearest Verwendet den nächstgelegenen Ancestor-Scrollcontainer (Standardeinstellung).
• root Der Darstellungsbereich des Dokuments wird als Scrollcontainer verwendet.
• self Das Element selbst wird als Scrollcontainer verwendet.

axis

Der zweite Parameter axis der Scroll Funktion hat folgende Argumente:

• block Verwendet die Fortschrittsmessung entlang der Blockachse des Scrollcontainers (Standardeinstellung).
• inline verwendet das Maß für den Fortschritt entlang der Inline-Achse des Scroll-Containers.
• y verwendet das Maß für den Fortschritt entlang der Y-Achse des Scrollcontainers.
• x verwendet das Maß für den Fortschritt entlang der X-Achse des Scrollcontainers.

HTML

<div id="redBox"></div>

CSS

            #redBox {
            position: fixed;
            top: 0;
            left: 0;
            height: 1em;
            width: 0;
            background-color: red;
            animation-name: scrollTest;
            animation-timing-function: linear;
            animation-timeline: scroll(root block);
            }

            @keyframes scrollTest {
            from {
            width: 0;
            }

            to {
            width: 100%;
            }
            }