Scroll-Reveals und Übergänge

Teile, die sich öffnen und zeigen, was dahinter liegt, Karten, die sich auffächern und stapeln, und Sections, die an die nächste übergeben.

3 Components · 15 Variants

Kategorie wechseln

Auf dieser Seite

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

Kartenfächer5
Section-Übergänge5
Geteilte Enthüllung5

card-fan

Kartenfächer

Karten, die sich auffächern, verteilen und stapeln. Drei öffnen sich beim Hereinscrollen aus einem Stapel, zwei spielt man von Hand, einen Bogen zum Drehen und ein Deck zum Austeilen. Ohne JavaScript liegt jede Karte an ihrem Platz.

Kartenhand
Stapel verteilt sich
Bogen zum Drehen
Deck aus Stimmen
Stapel aus Abzügen

Props und Details

Kartenhand

Ein Stapel öffnet sich beim Hereinscrollen zu einer Kartenhand. Die Karte unter dem Zeiger hebt sich heraus, auf dem Telefon per Antippen.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/card-fan

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

Usage

<CardFan variant="hand" items={[{ title, eyebrow, media }]} />

Source

Stapel verteilt sich

Die Karten liegen anfangs als ein Stapel in der Mitte und verteilen sich beim Hereinscrollen nacheinander in ihr Raster.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/card-fan

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

Usage

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

Source

Bogen zum Drehen

Karten auf einem weiten Bogen, die vordere steht aufrecht. Gedreht wird mit den Pfeilen, den Pfeiltasten, per Wischen oder Klick auf eine Karte.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/card-fan

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

Usage

<CardFan variant="arc" items={[{ title, eyebrow, href, media }]} />

Source

Deck aus Stimmen

Ein Deck aus Zitaten neben der Überschrift. Die oberste Karte wandert per Knopf, Pfeiltaste oder Wischen nach hinten, die nächste steigt auf.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/card-fan

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

Usage

<CardFan variant="deck" items={[{ title: "quote", eyebrow: "name", text: "company", media }]} />

Source

Stapel aus Abzügen

Ein loser Stapel Abzüge sortiert sich beim Hereinscrollen zu einer Reihe mit Bildunterschriften. Jeder Abzug behält eine leichte Drehung wie Papier auf dem Tisch.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/card-fan

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

Usage

<CardFan variant="photos" items={[{ title, eyebrow, media }]} />

Source

section-transitions

Section-Übergänge

Wie eine Section an die nächste übergibt. Die Seite blendet in ein dunkles Band oder einen Akzentschleier, eine Section gleitet wie ein Vorhang über die letzte, öffnet sich durch einen Kreis oder schiebt die vorige als Karte zurück. Ohne JavaScript steht jede Section auf ihrem eigenen Hintergrund.

In ein dunkles Band
Akzentschleier
Vorhang
Durch einen Kreis
Zurück in eine Karte

Props und Details

In ein dunkles Band

Die Seite blendet für eine Section in ein dunkles Band und wieder hinaus. Text blendet mit seinem Hintergrund, nichts steht auf dem falschen Grund.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/section-transitions

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

Usage

<SectionTransitions variant="dark-band" items={[{ title, text, points }, { title, tone: "dark" }, …]} />

Source

Akzentschleier

Die Seite nimmt für die eine wichtige Section einen weichen Schleier im Akzent an, eine Saisonkarte oder ein Angebot, und kehrt dann zurück.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/section-transitions

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

Usage

<SectionTransitions variant="accent-wash" items={[{ title }, { title, tone: "accent" }, { title }]} />

Source

Vorhang

Jede Section gleitet wie ein Vorhang mit runder Kante über die vorige, die Section darunter tritt unter einem Schleier zurück.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/section-transitions

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

Usage

<SectionTransitions variant="curtain" items={[{ title, tone: "base" }, { title, tone: "surface" }, { title, tone: "dark" }]} />

Source

Durch einen Kreis

Jede Section öffnet sich durch einen Kreis, der aus der Fenstermitte wächst, die vorige fällt ein wenig zurück.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/section-transitions

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

Usage

<SectionTransitions variant="circle" items={[{ title, tone }, …]} />

Source

Zurück in eine Karte

Die vorige Section schrumpft zu einer runden Karte und tritt zurück, während die nächste darüber aufsteigt. Gut für vorher und nachher.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/section-transitions

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

Usage

<SectionTransitions variant="card-shrink" items={[{ title, tone: "surface" }, { title }]} />

Source

split-reveal

Geteilte Enthüllung

Zwei oder mehr Teile, die sich beim Scrollen öffnen und freigeben, was dahinter liegt. Die Teile tragen die Botschaft, je eine halbe Überschrift oder ein Wort. Ohne JavaScript steht die Botschaft als Überschrift über dem, was sie zeigt.

Türen
Rollo mit Zahlen
Diagonaler Schnitt
Abgerissenes Ticket
Fünf Lamellen

Props und Details

Türen

Zwei Türen mit je einer halben Überschrift gleiten auseinander. Dahinter der Laden, sein Name und die Öffnungszeiten.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/split-reveal

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

Usage

<SplitReveal variant="doors" parts={["Doors", "open"]} title="…" media={<img … />} facts={[{ label, value }]} />

Source

Rollo mit Zahlen

Eine obere und eine untere Hälfte teilen sich an der Mittellinie, die Zahlen dahinter kommen nacheinander.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/split-reveal

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

Usage

<SplitReveal variant="shutter" parts={["Behind", "the scenes"]} title="…" facts={[{ value, label }]} />

Source

Diagonaler Schnitt

Das Fenster ist entlang der Diagonale geschnitten, beide Hälften gleiten entlang des Schnitts hinaus und lassen das Bild zurück.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/split-reveal

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

Usage

<SplitReveal variant="diagonal" parts={["Built", "to last"]} title="…" media={<img … />} action={{ label, href }} />

Source

Abgerissenes Ticket

Ein Ticket reißt an der Perforation, die Hälften treiben drehend auseinander, und darunter liegen die Angaben zum Abend.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/split-reveal

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

Usage

<SplitReveal variant="ticket" parts={["Summer", "night"]} stub="Row 4" title="…" facts={[{ label, value, icon }]} />

Source

Fünf Lamellen

Fünf Lamellen mit je einem Wort gleiten abwechselnd nach oben und unten. Erst liest sich der Satz, dann das Bild dahinter.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/split-reveal

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

Usage

<SplitReveal variant="slats" parts={["Thrown", "by", "hand", "in", "Leipzig"]} title="…" media={<img … />} />

Source

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Scroll-Reveals und Übergänge stehen.

Auf dieser Seite

Kartenhand

Stapel verteilt sich

Bogen zum Drehen

Deck aus Stimmen

Stapel aus Abzügen

In ein dunkles Band

Akzentschleier

Vorhang

Durch einen Kreis

Zurück in eine Karte

Türen

Rollo mit Zahlen

Diagonaler Schnitt

Abgerissenes Ticket

Fünf Lamellen

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit