Scroll Animationen und Scroll-Geschichten

Sections, die beim Scrollen erzählen. Karten, die sich stapeln, seitlich wandernde Reihen, aufzoomende Bilder und Medien, die stehen bleiben.

4 Components · 20 Variants

Kategorie wechseln

Sections, die beim Scrollen erzählen

Eine Scroll-Geschichte macht aus dem Scrollen eine Erzählung, Kapitel für Kapitel. Die vier Components hier rendern zuerst ihr fertiges Layout auf dem Server, der Inhalt steht also ohne JavaScript da, und bei reduzierter Bewegung ruhen sie, statt trotzdem zu laufen.

Bei den Stapelkarten gleiten Cards übereinander, in reinem CSS gebaut, gut für Features, einen Ablauf oder Fallstudien. „Seitlich scrollen“ bewegt eine Reihe zur Seite, während die Seite nach unten geht, mit einem Zähler für den Fortschritt und einem eigenen Layout am Handy. „Zoom beim Scrollen“ lässt ein Bild oder Produkt bis zum ganzen Fenster wachsen. „Stehende Medien“ halten Bild, Karte oder Browser fest, während daneben die Kapitel wechseln.

Nimm eine Scroll-Geschichte pro Seite, zwei konkurrieren um Aufmerksamkeit. Halte jedes Kapitel bei einer Headline und zwei Zeilen, Menschen scrollen schneller, als sie lesen. Prüf die Seite einmal mit reduzierter Bewegung, das fertige Layout sollte die ganze Geschichte erzählen.

Auf dieser Seite

Alle Components dieser Kategorie. Wähle eine, um zu ihren Variants zu springen.

Stehende Medien5
Seitlich scrollen5
Stapelkarten5
Zoom beim Scrollen5

pinned-media

Stehende Medien

Ein Medium, das stehen bleibt, während die Kapitel wechseln, und jeder Wechsel ist ein sichtbarer Übergang. Bilder blenden mit Tiefe über, eine Kamera fährt über eine Karte, Bilder wischen, ein Filmstreifen läuft, Bildschirme gleiten im Browser.

Bilder im ganzen Fenster
Kamera über einer Karte
Wischen durch den Tag
Filmstreifen
Browser mit Reitern

Props und Details

Bilder im ganzen Fenster

Bilder füllen das Fenster hinter vorbeiziehenden Karten. Jedes blendet aus leichtem Zoom ein, wenn seine Karte kommt, die Marken rechts zählen mit.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/pinned-media

Bringt mit utils, kit, reveal, section, frame, scroll-scene

Usage

<PinnedMedia variant="fullbleed" title="…" chapters={[{ eyebrow, title, text, media }]} />

Source

Kamera über einer Karte

Eine große Karte bleibt, und die Kamera fährt zum Ort jedes Kapitels, zwischen zwei Stationen nimmt sie etwas Abstand wie bei einer echten Fahrt.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/pinned-media

Bringt mit utils, kit, reveal, section, frame, scroll-scene

Usage

<PinnedMedia variant="pan-zoom" media={<Map />} chapters={[{ title, text, focus: { x, y, zoom } }]} />

Source

Wischen durch den Tag

Die Bilder eines Tages lösen einander mit einem Wischen von rechts ab, der Kapiteltext steigt mit jedem auf, und die Liste daneben zählt mit.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/pinned-media

Bringt mit utils, kit, reveal, section, frame, scroll-scene

Usage

<PinnedMedia variant="wipe" title="…" chapters={[{ eyebrow: "7 am Yoga", title, text, media }]} />

Source

Filmstreifen

Ein Hochformat mit einem Filmstreifen, der mit jedem Kapitel weiterläuft, das Bild vorn wächst auf volle Größe. Daneben wechselt der Text.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/pinned-media

Bringt mit utils, kit, reveal, section, frame, scroll-scene

Usage

<PinnedMedia variant="reel" title="…" chapters={[{ eyebrow, title, text, media }]} />

Source

Browser mit Reitern

Ein Browserfenster bleibt, die Bildschirme gleiten von Kapitel zu Kapitel seitlich. Die Reiter darüber füllen sich dabei und springen per Klick zu ihrem Kapitel.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/pinned-media

Bringt mit utils, kit, reveal, section, frame, scroll-scene

Usage

<PinnedMedia variant="device" url="app.northwind.io" chapters={[{ eyebrow, title, text, media }]} />

Source

sideways-scroll

Seitlich scrollen

Eine Section, die seitlich wandert, während die Seite nach unten scrollt. Sie bleibt stehen, bis ihre Reihe vorbeigezogen ist, Linie und Zähler zeigen den Stand. Auf dem Telefon hat jede Variante ihr eigenes Layout, ohne JavaScript scrollt die Reihe von Hand.

Leistungskarten
Zeitleiste
Galerie mit Wort dahinter
Breite Kapitel
Produktreihe

Props und Details

Leistungskarten

Karten mit Icon, Preiszeile und einer Nummer, die aufleuchtet, wenn die Karte die Leselinie erreicht. Auf dem Telefon eine Liste.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/sideways-scroll

Bringt mit utils, kit, button, icon, reveal, section, motion, scroll-scene

Usage

<SidewaysScroll variant="cards" items={[{ icon, eyebrow, title, text }]} />

Source

Zeitleiste

Jahre auf einer Linie, die sich füllt, während du sie passierst, das erreichte Jahr wird hell. Auf dem Telefon läuft die Linie nach unten.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/sideways-scroll

Bringt mit utils, kit, button, icon, reveal, section, motion, scroll-scene

Usage

<SidewaysScroll variant="timeline" items={[{ year: "1987", title, text, media }]} />

Source

Galerie mit Wort dahinter

Bilder unterschiedlicher Breite ziehen vorbei, ein großes Wort gleitet mit einem Drittel ihres Tempos dahinter. Auf dem Telefon eine Wischreihe.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/sideways-scroll

Bringt mit utils, kit, button, icon, reveal, section, motion, scroll-scene

Usage

<SidewaysScroll variant="gallery" backdrop="Projects" items={[{ title, text, eyebrow, media }]} />

Source

Breite Kapitel

Ein breites Panel je Kapitel, Text neben einem Bild, die Geschichte liest sich von links nach rechts. Auf dem Telefon folgen die Panels untereinander.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/sideways-scroll

Bringt mit utils, kit, button, icon, reveal, section, motion, scroll-scene

Usage

<SidewaysScroll variant="chapters" items={[{ eyebrow, title, text, href, media }]} />

Source

Produktreihe

Eine Shopreihe mit Preisen und Etiketten, die auf einer Kachel zur ganzen Kollektion endet. Bilder zoomen beim Darüberfahren leicht, auf dem Telefon eine Wischreihe.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/sideways-scroll

Bringt mit utils, kit, button, icon, reveal, section, motion, scroll-scene

Usage

<SidewaysScroll variant="products" items={[{ title, eyebrow, price, tag, href, media }]} action={{ label, href }} />

Source

sticky-stack

Stapelkarten

Karten, die sich beim Scrollen übereinander legen. Die nächste Karte schiebt sich über die letzte, die ein wenig zurücktritt. Das Stapeln ist reines CSS und funktioniert auch ohne JavaScript.

Feature-Karten
Ablauf mit Titelleisten
Fallstudien
Überschrift und Stimmen
Stapel aus Notizen

Props und Details

Feature-Karten

Große Karten mit Text neben einem Bildschirm. Jede bleibt etwas tiefer stehen als die vorige, die verdeckte Karte wird kleiner und dunkler.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/sticky-stack

Bringt mit utils, kit, button, icon, reveal, section, scroll-scene

Usage

<StickyStack variant="features" items={[{ eyebrow, title, text, points, media }]} />

Source

Ablauf mit Titelleisten

Schritte stapeln sich wie Reiter in einem Ordner. Die Titelleiste jedes Schritts bleibt über dem nächsten lesbar, der Inhalt blendet darunter aus.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/sticky-stack

Bringt mit utils, kit, button, icon, reveal, section, scroll-scene

Usage

<StickyStack variant="process" items={[{ eyebrow: "Week 1", title, text, points, figure, figureLabel }]} />

Source

Fallstudien

Ganze Bilder mit dem Ergebnis in großen Zahlen. Sie legen sich wie Abzüge übereinander, beim Darüberfahren zoomt das Bild leicht.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/sticky-stack

Bringt mit utils, kit, button, icon, reveal, section, scroll-scene

Usage

<StickyStack variant="case-studies" items={[{ eyebrow, title, text, figure, figureLabel, href, media }]} />

Source

Überschrift und Stimmen

Die Überschrift bleibt links stehen, rechts stapeln sich Zitate mit einer Kennzahl. Auf dem Telefon steht die Überschrift zuerst, die Zitate stapeln sich darunter.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/sticky-stack

Bringt mit utils, kit, button, icon, reveal, section, scroll-scene

Usage

<StickyStack variant="split" title="…" items={[{ title: "quote", author, role, figure, avatar }]} />

Source

Stapel aus Notizen

Ein mittiger Stapel aus Notizen mit je einem Bild. Sie landen leicht gedreht wie Papier auf dem Tisch und treten zurück, wenn die nächste sie verdeckt.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/sticky-stack

Bringt mit utils, kit, button, icon, reveal, section, scroll-scene

Usage

<StickyStack variant="pile" items={[{ title: "quote", author, role, media, avatar }]} />

Source

zoom-reveal

Zoom beim Scrollen

Ein Bild oder Produkt, das beim Scrollen von klein auf das ganze Fenster wächst. Die Überschrift tritt zurück, das Bild wächst, am Ende kommt sein eigener Text. Ohne JavaScript steht das fertige Layout da.

Foto bis zum Fensterrand
Produktbildschirm
Film
Raster zu einem Bild
App-Icon zum Telefon

Props und Details

Foto bis zum Fensterrand

Ein Foto wächst von einer Karte unter der Überschrift bis ins ganze Fenster und beruhigt sich dabei aus einem leichten Zoom. Am Ende kommen Ort und Angebot darauf.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/zoom-reveal

Bringt mit utils, kit, button, icon, reveal, section, frame, scroll-scene

Usage

<ZoomReveal variant="image" title="…" media={<img … />} overlay={{ eyebrow, title, text }} action={{ label, href }} />

Source

Produktbildschirm

Ein Screenshot steigt unter der Überschrift auf und wächst auf Seitenbreite, dann erscheinen nacheinander vier Hinweise darauf. Auf dem Telefon reihen sie sich darunter.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/zoom-reveal

Bringt mit utils, kit, button, icon, reveal, section, frame, scroll-scene

Usage

<ZoomReveal variant="product" title="…" media={<BrowserFrame>…</BrowserFrame>} notes={[{ label, icon }]} />

Source

Film

Das Standbild eines Films wächst bis ins Fenster, der Abspielknopf landet in der Mitte und startet den Film. Für Imagefilm oder Produktvideo.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/zoom-reveal

Bringt mit utils, kit, button, icon, reveal, section, frame, scroll-scene

Usage

<ZoomReveal variant="video" title="…" media={<img poster … />} duration="2:14" overlay={{ title }} />

Source

Raster zu einem Bild

Neun Bilder füllen das Fenster. Das mittlere wächst, bis es alles bedeckt, die anderen gleiten mit hinaus, und der Schlusstext kommt darauf.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/zoom-reveal

Bringt mit utils, kit, button, icon, reveal, section, frame, scroll-scene

Usage

<ZoomReveal variant="grid" title="…" images={[…nine pictures]} overlay={{ title, text }} action={{ label, href }} />

Source

App-Icon zum Telefon

Ein App-Icon wächst zum Telefon mit der App, dann kommen ihre Funktionen von beiden Seiten. Auf dem Telefon reihen sie sich darunter.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/zoom-reveal

Bringt mit utils, kit, button, icon, reveal, section, frame, scroll-scene

Usage

<ZoomReveal variant="app-icon" title="…" icon={<AppIcon />} media={<PhoneScreen />} notes={[{ label, icon }]} />

Source

Ähnliche Components

Mehr aus Marketing, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Scroll-Geschichten stehen.

In die Zwischenablage kopiert