Parallax

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.

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.

Ein Standbild zoomt und schwenkt langsam innerhalb seines Rahmens.

Füge bei [wo] einen „Ken Burns Effect“ hinzu (auch slow pan and zoom genannt).
Solange ein Bild zu sehen ist, soll es sehr langsam zoomen und nur in eine Richtung wandern und dann in das nächste Bild überblenden, das sich in eine andere Richtung bewegt: ruhig und fortlaufend.
Lass jedes Bild seinen Rahmen jederzeit ganz ausfüllen, damit nie ein Rand sichtbar wird, und lass die Bilder bei reduzierter Bewegung (prefers-reduced-motion) still stehen.

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.