Scroll-Linked Animation

Eine Animation spielt einmal ab, wenn ein Element in den Viewport eintritt oder ihn verlässt.

Füge bei [wo] eine „Scroll-Triggered Animation“ hinzu (auch reveal on scroll oder animate on scroll genannt).
Jedes Element soll beim Hineinscrollen einmal einblenden und nach oben an seinen Platz gleiten, in eigenem schnellem, weichem Tempo statt der Scrollposition zu folgen.
Lass den Inhalt sichtbar, falls Skripte nicht laden, und zeige die Elemente bei reduzierter Bewegung (prefers-reduced-motion) sofort an.

Ebenen bewegen sich beim Scrollen unterschiedlich schnell und erzeugen so Tiefenwirkung.

Füge bei [wo] einen „Parallax“-Scrolleffekt hinzu (auch parallax scrolling oder parallax layers genannt).
Hintergrundebenen sollen sich beim Scrollen langsamer bewegen als der Inhalt, die hinterste Ebene am wenigsten, für eine dezente Tiefenwirkung.
Koppel ihn ohne Verzögerung an die Scrollposition, lass Text auf der Ebene mit normaler Geschwindigkeit und schalte den Effekt bei reduzierter Bewegung (prefers-reduced-motion) ab.

Ein Element oder eine Szene wird beim Scrollen größer oder kleiner.

Füge bei [wo] einen „Zoom on Scroll“-Effekt hinzu (auch scroll zoom oder scale on scroll genannt).
Solange der Abschnitt im Blick gehalten wird, soll das Element synchron zum Scrollen von einer kleinen Karte weich wachsen, bis es die ganze Ansicht füllt, und beim Hochscrollen wieder schrumpfen.
Skaliere es, ohne das Layout drumherum zu verschieben, und zeige es bei reduzierter Bewegung (prefers-reduced-motion) direkt in Endgröße ohne Zoom.

Die Wörter eines Absatzes gehen beim Scrollen von blass zu voller Deckkraft über.

Füge bei [wo] einen „Text Reveal“-Effekt hinzu (auch scroll text reveal oder word-by-word reveal genannt).
Der Absatz soll blass beginnen, und beim Scrollen soll ein Wort nach dem anderen auf volle Stärke aufhellen, gekoppelt an die Scrollposition.
Beim Hochscrollen sollen die Wörter wieder verblassen, und der ganze Absatz soll unabhängig von der Abdunklung für Screenreader verfügbar bleiben.

Scrollen und Sprünge zu Ankern gleiten weich aus, statt abrupt zu springen.

Füge bei [wo] „Smooth Scroll“ hinzu (auch smooth scrolling oder inertia scroll genannt).
Scrollen und Sprünge zu Ankern sollen weich gleiten und sanft auslaufen statt ruckartig zu springen – leicht und direkt, nicht schwer und träge.
Erhalte natives Verhalten wie Tastatur-Scrollen, Scrollbar und Suche auf der Seite, und schalte die Glättung bei reduzierter Bewegung (prefers-reduced-motion) ab.

Karten bleiben beim Scrollen oben kleben und stapeln sich übereinander, wobei die früheren oft kleiner werden.

Füge bei [wo] „Stacking Cards“ hinzu (auch sticky stacking cards oder card stack scroll genannt).
Beim Scrollen soll jede Karte nahe am oberen Rand kleben bleiben und die nächste darüber hochgleiten, während die Karten darunter leicht schrumpfen, sodass ein ordentlicher Stapel entsteht.
Lass von jeder früheren Karte einen schmalen Rand sichtbar und gib der letzten Karte genug Platz, um ihre Position zu erreichen, bevor der Abschnitt endet.