Stacking Cards

Karten liegen leicht versetzt übereinander, und die oberste weicht zur Seite, um die nächste freizugeben.

Füge bei [wo] einen „Card Stack“ hinzu (auch stacked cards genannt).
Staple die Karten leicht versetzt hintereinander; jeder Klick soll die oberste Karte zur Seite schwingen und hinten einreihen, während die übrigen nachrücken: weich, leicht und flott.
Mach es per Tastatur bedienbar, lass Screenreader jede Karte der Reihe nach erreichen und nutze bei reduzierter Bewegung (prefers-reduced-motion) eine einfache Überblendung.

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.

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.

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.