Scroll-Effekte

Bewegte Schrift und Tiefe, die eine Seite unverwechselbar machen. Ebenen in eigenem Tempo, gleitende Zeilen und Text als Fenster auf ein Bild.

3 Components · 13 Variants

Kategorie wechseln

Auf dieser Seite

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

Text im Scroll5
Text als Fenster4
Parallax-Ebenen4

text-scrub

Text im Scroll

Große Schrift, die sich genau mit dem Scroll bewegt, eine Aussage pro Seite. Zeilen gleiten gegeneinander, Wörter finden zusammen, ein Wort schrumpft an seinen Platz, Zeilen steigen auf oder ein Umriss füllt sich. Ohne JavaScript steht die Aussage fertig da.

Gleitende Zeilen
Wörter finden zusammen
Ein Wort schrumpft an seinen Platz
Zeilen steigen nacheinander
Umriss füllt sich

Props und Details

Gleitende Zeilen

Drei oder vier riesige Zeilen gleiten gegeneinander, während die Section vorbeizieht, kleine runde Bilder sitzen zwischen den Wörtern.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/text-scrub

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

Usage

<TextScrub variant="lines" lines={["We build [0] websites", "that work", "for years [1]"]} images={[…]} />

Source

Wörter finden zusammen

Die Wörter eines Satzes stehen anfangs weit verteilt auf beiden Seiten und finden beim Scrollen in der Mitte zusammen, dann kommt die Zeile darunter.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/text-scrub

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

Usage

<TextScrub variant="converge" lines={["Everything you need,", "nothing you don’t"]} />

Source

Ein Wort schrumpft an seinen Platz

Ein Wort füllt das Fenster und schrumpft beim Scrollen an seinen Platz, der Satz darunter kommt, sobald es gelandet ist.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/text-scrub

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

Usage

<TextScrub variant="scale" lines={["Calm.", "Software that stays out of your way"]} />

Source

Zeilen steigen nacheinander

Jede Zeile steigt aus ihrem eigenen Schlitz auf, eine nach der anderen beim Scrollen, wie eine Seite, die gesetzt wird. Die letzte Zeile trägt den Akzent.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/text-scrub

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

Usage

<TextScrub variant="stack" lines={["Fewer meetings.", "Fewer tools.", "More work done."]} />

Source

Umriss füllt sich

Riesige Umrisszeilen füllen sich beim Scrollen von links nach rechts mit Farbe, Zeile für Zeile. Die letzte füllt sich im Akzent.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/text-scrub

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

Usage

<TextScrub variant="outline" lines={["Built", "to last."]} />

Source

mask-reveal

Text als Fenster

Schrift als Fenster auf ein Bild. Die Buchstaben sind aus der Seite geschnitten, das Bild bewegt sich beim Scrollen dahinter, und in einer Variante fliegt die Kamera durch einen Punkt ins Bild. Echter, markierbarer Text in hell und dunkel.

Riesiges Wort
Durch den Punkt fliegen
Ein Bild je Zeile
Zahl als Fenster

Props und Details

Riesiges Wort

Ein riesiges Wort über die ganze Seite, das Bild gleitet beim Vorbeiscrollen durch seine Buchstaben nach oben.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/mask-reveal

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

Usage

<MaskReveal variant="headline" lines={["Summer"]} media={<img … />} />

Source

Durch den Punkt fliegen

Ein kurzer Satz endet mit einem Punkt. Beim Scrollen fliegt die Kamera durch den Punkt in das Bild dahinter, und das Angebot kommt darauf.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/mask-reveal

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

Usage

<MaskReveal variant="zoom-through" lines={["Come in"]} media={<img … />} description="…" action={{ label, href }} />

Source

Ein Bild je Zeile

Drei kurze Zeilen, jede ein Fenster auf ihr eigenes Bild. Zeilen und Bilder treiben beim Vorbeiscrollen gegeneinander.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/mask-reveal

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

Usage

<MaskReveal variant="lines" lines={["Peaks", "Coast", "Towns"]} images={[…]} />

Source

Zahl als Fenster

Eine große Zahl ist das Fenster aufs Bild, daneben stehen ihre Bedeutung und ein paar Fakten. Für Höhen, Strecken, Jahre.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/mask-reveal

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

Usage

<MaskReveal variant="numbers" lines={["1,840 m"]} media={<img … />} facts={[{ value, label }]} />

Source

parallax-layers

Parallax-Ebenen

Eine Szene aus Ebenen, die sich beim Scrollen unterschiedlich schnell bewegen und so Tiefe zeigen. Kleine Wege, auf dem Telefon halb so groß, und ohne JavaScript ruht jede Ebene im fertigen Bild.

Landschaft im Akzent
Schwebende Karten
Treibende Collage
Wort, Bild, Text

Props und Details

Landschaft im Akzent

Eine gezeichnete Landschaft in fünf Ebenen, gefärbt im Akzent. Die Überschrift steht zwischen fernen Bergen und nahen Hügeln, der vordere Hügel wird zur Seite darunter.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/parallax-layers

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

Usage

<ParallaxLayers variant="landscape" title="…" description="…" action={{ label, href }} />

Source

Schwebende Karten

Ein Produktbildschirm mit Karten, die in unterschiedlicher Tiefe davor schweben. Je näher eine Karte, desto schneller, auf dem Telefon bleiben zwei.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/parallax-layers

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

Usage

<ParallaxLayers variant="product" title="…" media={<BrowserFrame>…</BrowserFrame>} cards={[{ label, value, icon }]} />

Source

Treibende Collage

Sechs Bilder treiben um eine mittige Botschaft, jedes in seinem Tempo. Auf dem Telefon bleiben vier, mit halbem Weg.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/parallax-layers

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

Usage

<ParallaxLayers variant="collage" title="…" images={[…six pictures]} action={{ label, href }} />

Source

Wort, Bild, Text

Ein riesiges Wort weit hinten läuft gegen den Scroll, das Bild vorn am schnellsten, der Text dazwischen folgt. Drei Tiefen, eine ruhige Seite.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/parallax-layers

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

Usage

<ParallaxLayers variant="type" word="Craft" title="…" media={<img … />} />

Source

Wird oft kombiniert mit

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

Auf dieser Seite

Gleitende Zeilen

Wörter finden zusammen

Ein Wort schrumpft an seinen Platz

Zeilen steigen nacheinander

Umriss füllt sich

Riesiges Wort

Durch den Punkt fliegen

Ein Bild je Zeile

Zahl als Fenster

Landschaft im Akzent

Schwebende Karten

Treibende Collage

Wort, Bild, Text

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit