Zum Inhalt springen
UI Kit
Accent

3D Scroll Animationen und Szenen

Szenen, die sich beim Scrollen durch den Raum bewegen. Eine Kamera fliegt durch Ebenen, Paneele kommen nach vorn, Schrift bekommt Tiefe und Geräte drehen sich und zeigen ihre Seiten.

6 Components · 25 Variants
Kategorie wechseln

Eine Seite, die durch den Raum fährt

Eine 3D-Szene macht aus dem Scrollen eine Kamerafahrt. Die Section bleibt stehen, während die Kamera fliegt, dreht oder zoomt, und die Inhalte kommen aus der Tiefe. Jede Szene ist echtes HTML in CSS-Perspektive, Überschriften bleiben also Überschriften für Suchmaschinen und Screenreader, und ohne JavaScript oder bei reduzierter Bewegung steht das fertige Layout als ruhige Seite da.

Der Kameraflug fliegt durch Ebenen, als Kapitel, Galerie im Raum, Jahre in die Tiefe oder Manifest. Schwebende Paneele kommen nacheinander nach vorn, aus einer Wolke, einem Regal, einer Umlaufbahn oder neben Schritten. Die Tiefenschrift gibt einer echten Überschrift 3D-Ebenen, als plastisches Wort, Zeilen in eigener Tiefe, aufstehende Überschrift, Echo oder davonlaufende Geschichte. Der Tunnel-Zoom fährt durch Karten, Rahmen, Ringe mit Zahlen oder ein Tor aus Licht. Das Dreh-Showcase dreht Telefon, Laptop, Seitenwürfel oder Karte und zeigt bei jeder Drehung einen neuen Bildschirm. Der Perspektivboden legt Linien oder Punkte unter eine Überschrift, Karten, Säulen oder ein Angebot.

Eine Szene pro Seite genügt, sie wird zum Moment, an den man sich erinnert. Kameraflug und Tiefenschrift passen zu einer Geschichte oder einem Manifest, Dreh-Showcase und schwebende Paneele erklären ein Produkt, Tunnel-Zoom und Perspektivboden eröffnen oder beschließen eine Seite. Halte jede Station bei einer kurzen Zeile, die Kamera gibt das Tempo vor.

Auf dieser Seite

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

depth-text

Tiefenschrift

Schrift in 3D-Ebenen, die sich mit dem Scroll dreht, aufrichtet und auseinandergeht. Die Wörter bleiben eine echte Überschrift, die Tiefe kommt aus Kopien, die Screenreader nicht sehen. Ohne JavaScript steht das fertige Bild.

Props und Details · Tiefenschrift

Plastisches WortNeu in 1.2

Ein großes Wort mit festem Körper im Akzent dahinter. Es dreht sich beim Vorbeiscrollen von links nach rechts und neigt sich zur Maus.

Zeilen in eigener TiefeNeu in 1.2

Eine Überschrift, deren Zeilen in unterschiedlicher Tiefe schweben. Beim Vorbeiscrollen driften sie seitlich auseinander und finden in der Mitte zusammen.

Überschrift, die aufstehtNeu in 1.2

Die Zeilen liegen flach wie ein Boden und richten sich nacheinander auf, während die Sektion ins Bild scrollt, die letzte im Akzent.

Echo in die FerneNeu in 1.2

Ein Wort, als Umriss in die Ferne wiederholt. Beim Scrollen rücken die Echos an das feste Wort vorn heran.

Geschichte, die davonläuftNeu in 1.2

Eine kurze Geschichte auf einer geneigten Fläche, die nach oben in die Ferne läuft, während die Sektion stehen bleibt. Der ganze Text ist eine Überschrift mit Absätzen in der Seite.

camera-flight

Kameraflug

Eine Kamera, die beim Scrollen durch Ebenen voller Inhalt nach vorn fliegt. Jede Ebene kommt aus dem Dunst, wird vor dir scharf und zieht vorbei. Ohne JavaScript stehen die Ebenen als ruhige Liste da.

Props und Details · Kameraflug

Kapitel in der TiefeNeu in 1.2

Textkapitel stehen in der Tiefe, abwechselnd links und rechts, über einem gezeichneten Boden, der bis zum Horizont läuft. Eine feine Linie unten zeigt, wie weit der Flug ist.

Jahre in die TiefeNeu in 1.2

Große Jahreszahlen mit ihrer Geschichte, eine nach der anderen an einer Linie, die in die Tiefe läuft. Gut für eine Firmengeschichte oder den Weg eines Produkts.

Manifest im FlugNeu in 1.2

Ein großer Satz nach dem anderen kommt dir aus dem Dunkel entgegen und zieht vorbei. Die ruhigste der vier Varianten, für Werte und Manifeste.

floating-panels

Schwebende Paneele

Paneele, die im Raum schweben und beim Scrollen nacheinander nach vorn kommen. Das vordere dreht sich zu dir, die anderen warten im Raum. Ohne JavaScript stehen sie in einem ruhigen Raster.

Props und Details · Schwebende Paneele

Wolke aus FunktionenNeu in 1.2

Funktionspaneele warten in einer lockeren Wolke weit hinten, jedes kommt der Reihe nach in die Mitte und kehrt an seinen Platz zurück.

Paneele im RegalNeu in 1.2

Paneele stehen nebeneinander wie Bücher im Regal, abgewandt. Das aktive gleitet nach vorn und dreht sich zu dir, mit einem Bildschirm obenauf.

Umlaufbahn um die ÜberschriftNeu in 1.2

Paneele auf einem Ring im Raum, der Ring dreht sich mit dem Scroll und bringt jedes Paneel unter der Überschrift nach vorn.

Schritte mit SäuleNeu in 1.2

Schritte links, das passende Paneel schwebt rechts in einer Säule nach vorn, die anderen kippen oben und unten weg.

perspective-floor

Perspektivboden

Ein Boden aus Linien oder Punkten bis zu einem weichen Horizont, als Bühne für eine Überschrift, Karten, Zahlen oder ein Angebot. Er strömt beim Scrollen auf dich zu und treibt langsam, solange er zu sehen ist, Text steht immer auf ruhigem Grund.

Props und Details · Perspektivboden

Auftakt über einem RasterNeu in 1.2

Eine große Überschrift über einem Linienboden im Akzent, der am Horizont leuchtet. Gut als erste Sektion für ein Produkt oder ein Event.

Karten auf einer BühneNeu in 1.2

Drei Karten stehen auf einem Punkteboden mit weicher Spiegelung, die mittlere einen Schritt vorn. Die Kamera schwenkt beim Scrollen ein wenig.

Zahlen als SäulenNeu in 1.2

Zahlen wachsen als feste Säulen aus einem Boden, während die Sektion ins Bild scrollt, die letzte im Akzent. Die Legende daneben trägt jeden Wert als Text.

Angebot über dem HorizontNeu in 1.2

Ein Punkteboden zu einem Horizont aus Licht im Akzent, darüber schwebt eine Karte mit Angebot und Knopf.

rotate-showcase

Dreh-Showcase

Ein Objekt, das sich mit dem Scroll dreht und bei jeder Drehung eine neue Seite zeigt, mit dem passenden Kapitel daneben. Die Bildschirme wechseln, während die Rückseite zu sehen ist, den Wechsel selbst sieht man nie.

Props und Details · Dreh-Showcase

Telefon, das sich drehtNeu in 1.2

Ein Telefon dreht sich je Bildschirm einmal herum und zeigt dazwischen seine Rückseite mit den Kameras. Die Kapitel links lassen sich anklicken.

Laptop von hinten nach vornNeu in 1.2

Ein Laptop dreht sich von hinten nach vorn und öffnet den Deckel, danach läuft er Kapitel für Kapitel durch seine Bildschirme.

Würfel aus SeitenNeu in 1.2

Vier Seiten auf den Flächen eines Würfels, eine Vierteldrehung pro Seite. Gut, um die Seiten einer Website oder die Bereiche einer App zu zeigen.

Drehende KarteNeu in 1.2

Eine Karte in eigenem Design dreht sich mit dem Scroll, Vorder- und Rückseite wechseln sich ab, während die Vorteile daneben wechseln. Für Mitgliedschaften, Geschenk- und Zahlkarten.

tunnel-zoom

Tunnel-Zoom

Ein Zoom durch einen Tunnel beim Scrollen, ausgekleidet mit Karten, gerahmten Bildern, Ringen mit Zahlen oder einem Tor aus Licht. Die Sektion bleibt stehen, die Kamera fährt, am Ende wartet ein Schlusstext.

Props und Details · Tunnel-Zoom

Tunnel aus KartenNeu in 1.2

Karten kleiden Wände, Boden und Decke eines Tunnels aus und ziehen an allen Seiten vorbei. Auf dem Telefon stehen sie an den zwei Wänden, am Ende wartet der Schlusstext.

Rahmen um RahmenNeu in 1.2

Gerahmte Bilder stehen hintereinander. Jedes füllt das Fenster, wenn die Kamera ankommt, und zieht vorbei, die Bildunterschrift auf ruhigem Schatten.

Ringe mit ZahlenNeu in 1.2

Abgerundete Ringe laufen im Akzent in die Ferne. In jedem steht eine Zahl und zieht vorbei, wie Meilensteine an einer Straße.

Tor aus LichtNeu in 1.2

Lichtringe führen zu einem runden Fenster. Wenn die Kamera ankommt, öffnet sich das Bild dahinter auf das ganze Fenster und der Schlusstext steigt auf dunklem Schatten auf.

Ähnliche Components

Mehr aus Visuals, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben 3D-Szenen stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert