Smooth Scroll

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.

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.

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.