Pinning

Der Text bleibt fixiert, während seine Zeilen mit dem Scrollfortschritt ein- und ausblenden.

Füge bei [wo] einen „Sticky Text Fade“-Effekt hinzu (auch sticky scroll text opacity fade genannt).
Während der Abschnitt scrollt, soll der Textblock fixiert bleiben und seine Zeilen sollen nacheinander mit dem Scrollfortschritt ein- und ausblenden.
Kopple die Überblendungen direkt an die Scrollposition, damit sie sich beim Zurückscrollen umkehren, und halte jede Zeile unabhängig von ihrer Deckkraft für Screenreader verfügbar.

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.

Vertikales Scrollen bewegt eine fixierte Reihe von Panels seitwärts.

Füge bei [wo] eine „Horizontal Scroll Section“ hinzu (auch horizontal scrolling oder scroll-jacked horizontal gallery genannt).
Erreicht der Abschnitt den oberen Rand, soll er fixiert bleiben, während Herunterscrollen seine Reihe von Panels seitwärts bewegt, und sich lösen, sobald das letzte Panel sichtbar ist.
Koppel die seitliche Bewegung direkt an die Scrollposition, damit Zurückscrollen sie umkehrt, und nutze auf kleinen Bildschirmen oder bei reduzierter Bewegung (prefers-reduced-motion) eine normale wischbare Reihe.

Ein fixierter Header wird nach dem Herunterscrollen niedriger oder kleiner.

Füge bei [wo] einen „Sticky Header Shrink“ hinzu (auch shrinking header oder shrink on scroll genannt).
Der Header soll oben bleiben und, sobald ein Stück heruntergescrollt wird, weich zu einer schmaleren Leiste mit kleinerem Logo schrumpfen und oben wieder wachsen.
Sorg dafür, dass der Inhalt darunter nicht springt, während der Header seine Größe ändert.

Ein Balken oder Ring füllt sich, während man durch die Seite oder den Artikel scrollt.

Füge bei [wo] einen „Scroll Progress Indicator“ hinzu (auch reading progress bar genannt).
Ein dünner Balken am oberen Rand soll sich von links nach rechts füllen, passend dazu, wie weit gescrollt wurde, und am Ende die volle Breite erreichen.
Kopple ihn direkt an die Scrollposition, ohne nachziehende Glättung, und lass ihn keinen Inhalt verdecken.

Das Scrollen rastet an festgelegten Punkten wie Slides oder Abschnitten ein.

Füge bei [wo] „Scroll Snap“ hinzu (auch scroll snapping oder snap scrolling genannt).
Wenn das Scrollen endet, soll die Ansicht sauber am nächsten Abschnitt einrasten, sodass jeder bündig am Rand steht statt auf halbem Weg stehen zu bleiben.
Nutze das native Einrasten des Browsers, damit Mausrad, Touch und Tastatur weiter funktionieren, und sorg dafür, dass Inhalte, die höher als die Ansicht sind, vollständig lesbar bleiben.

Der Fortschritt der Animation hängt direkt an der Scrollposition, sodass Vor- und Zurückscrollen sie abspielt oder zurückspult.

Füge bei [wo] eine „Scroll-Linked Animation“ hinzu (auch scroll-driven animation oder scroll scrub genannt).
Die Animation soll exakt der Scrollposition folgen: Runterscrollen spielt sie vorwärts ab, Hochscrollen spult sie sofort zurück, ohne eigenes zeitbasiertes Easing.
Lege die ganze Animation auf einen klaren Scrollbereich und zeige bei reduzierter Bewegung (prefers-reduced-motion) einen sinnvollen statischen Zustand.