Zoom on Scroll
Auch genannt Scroll Zoom, Scale on Scroll, Spatial Scroll Zoom
Ein Element oder eine Szene wird beim Scrollen größer oder kleiner.
Einsatz
Hero-Intros und Bildvergrößerung
Varianten
- zoom in
- zoom out
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] 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.Ähnliche Animationen
Ken Burns Effect
Auch genannt Slow pan and zoom, Ken Burns, Kenburns
Ein Standbild zoomt und schwenkt langsam innerhalb seines Rahmens.
Einsatz
Hero-Slideshows, Hintergründe
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.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.Mit der Maus darüberfahren
Hover Zoom
Auch genannt Image zoom on hover, Zoom-pan, Ken Burns hover zoom, Zoom effect
Ein Bild vergrößert sich beim Hovern in seinem Rahmen und schwenkt manchmal mit dem Zeiger mit.
Einsatz
Produktkarten, Vorschaubilder
Füge bei [wo] einen „Hover Zoom“-Effekt hinzu (auch image zoom on hover oder zoom-pan genannt).
Solange der Zeiger über dem Bild ist, soll es sich langsam und weich in seinem Rahmen vergrößern, während der Rahmen seine Größe behält, und beim Verlassen sanft zurückgehen.
Schneide das Bild auf seinen Rahmen zu, damit nichts über das Layout hinausragt, und zeige denselben Zoom beim Tastaturfokus.A
B
C
D
Darin scrollen
Parallax
Auch genannt Parallax Scrolling, Parallax Layers, Parallax scroll, Depth parallax, Parallax hero
Ebenen bewegen sich beim Scrollen unterschiedlich schnell und erzeugen so Tiefenwirkung.
Einsatz
Hero-Hintergründe, Landingpages
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.Mehr aus Scroll
Darin scrollen
Hide on Scroll Header
Auch genannt Headroom, Auto-hide Navbar, Reveal on Scroll Up, Scroll Direction Detection, Scroll Direction Animation
Ein Header verschwindet beim Herunterscrollen und erscheint beim Hochscrollen wieder.
Einsatz
Navigationsleisten auf Mobilgeräten und langen Seiten
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.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.