Scroll Snap
Auch genannt Scroll Snapping, Snap Scrolling
Das Scrollen rastet an festgelegten Punkten wie Slides oder Abschnitten ein.
Einsatz
Karussells, bildschirmfüllende Abschnitte und Galerien
Varianten
- mandatory
- proximity
- x axis
- y axis
Prompt
Ersetze [wo] durch die Stelle auf deiner Seite und füge den Prompt in deinen KI-Agenten ein. Jeder Prompt enthält den Namen der Animation – beim nächsten Mal reicht es, sie beim Namen zu nennen.
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.Ähnliche Animationen
A
B
C
Klicken
Carousel Slide
Auch genannt Slider, Swipe carousel, Scroll-snap carousel
Slides ziehen horizontal durch einen sichtbaren Ausschnitt und rasten jeweils eine nach der anderen ein.
Einsatz
Hero-Banner, Produktgalerien
Füge bei [wo] ein „Carousel Slide“ hinzu (auch slider oder swipe carousel genannt).
Jeder Schritt soll die Reihe seitwärts schieben, sodass die nächste Slide in der Mitte einrastet, weich und abbremsend, während die Nachbarn an den Rändern hervorschauen und die Positionspunkte mitgehen.
Bewege immer eine Slide auf einmal, unterstütze Wischen auf Touch-Geräten ebenso wie Buttons und Pfeiltasten, und beschrifte die Steuerelemente für Screenreader.Darin scrollen
Smooth Scroll
Auch genannt Smooth Scrolling, Inertia Scroll
Scrollen und Sprünge zu Ankern gleiten weich aus, statt abrupt zu springen.
Einsatz
Anker-Navigation und hochwertig wirkende Seiten
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.A
B
C
D
E
Darin scrollen
Horizontal Scroll Section
Auch genannt Horizontal Scrolling, Scroll-jacked Horizontal Gallery
Vertikales Scrollen bewegt eine fixierte Reihe von Panels seitwärts.
Einsatz
Galerien, Portfolios, Zeitleisten
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.A
B
C
D
Darin scrollen
Stacking Cards
Auch genannt Sticky Stacking Cards, Card Stack Scroll
Karten bleiben beim Scrollen oben kleben und stapeln sich übereinander, wobei die früheren oft kleiner werden.
Einsatz
Feature-Listen und Portfolios
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.Mehr aus Scroll
A
Darin scrollen
Scroll-Linked Animation
Auch genannt Scroll-Driven Animation, Scroll Scrub, Scroll Timeline Animation, Scrub, Scroll Scrubbing, Scroll Progress Timeline, scroll() timeline, View Progress Timeline, view() timeline, Element Visibility Animation
Der Fortschritt der Animation hängt direkt an der Scrollposition, sodass Vor- und Zurückscrollen sie abspielt oder zurückspult.
Einsatz
Storytelling-Seiten und Fortschrittseffekte
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.Darin scrollen
Scroll-Triggered Animation
Auch genannt Reveal on Scroll, Scroll Reveal, Animate on Scroll, Scroll Fade-In, Toggle Class on Scroll, Scroll Toggle Actions
Eine Animation spielt einmal ab, wenn ein Element in den Viewport eintritt oder ihn verlässt.
Einsatz
Einblendende Abschnitte und verzögertes Einblenden
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.