Scroll

Ein Header verschwindet beim Herunterscrollen und erscheint beim Hochscrollen wieder.

Füge bei [wo] einen „Hide on Scroll Header“ hinzu (auch headroom oder auto-hide navbar genannt).
Der Header soll nach oben aus dem Bild gleiten, wenn man nach unten scrollt, und bei jedem Hochscrollen wieder hereingleiten: schnell und weich, abhängig von der Richtung, nicht von der Distanz.
Zeig ihn ganz oben auf der Seite immer an, ignoriere winziges Scroll-Zittern und lass ihn sichtbar, solange etwas darin den Tastaturfokus hat.

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.

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 bleibt über einen Scrollbereich an Ort und Stelle fixiert, während andere Inhalte oder Animationen weiterlaufen.

Füge bei [wo] einen „Pinning“-Scrolleffekt hinzu (auch pinned section oder sticky section genannt).
Ein Panel soll an Ort und Stelle fixiert bleiben, während der Inhalt daneben vorbeiscrollt, sich passend zum gerade gelesenen Schritt ändern und sich am Ende des Abschnitts lösen.
Nutze lieber natives Sticky-Positioning, statt das Scrollen zu kapern, und sorge dafür, dass jeder Schritt auf kleinen Bildschirmen auch ohne das fixierte Panel gut lesbar ist.

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.

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.

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.

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.

Große Textzeilen gleiten seitwärts, während die Seite vertikal gescrollt wird.

Füge bei [wo] eine „Text Marquee on Scroll“ hinzu (auch scroll text marquee oder scroll velocity text genannt).
Große Textzeilen sollen beim Runterscrollen seitwärts gleiten, abwechselnde Zeilen in entgegengesetzte Richtungen, und beim Hochscrollen zurückgleiten.
Kopple die Bewegung an die Scrollposition, verhindere, dass die langen Zeilen eine horizontale Scrollbar erzeugen, und lass sie bei reduzierter Bewegung (prefers-reduced-motion) stillstehen.

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.