Zum Inhalt springen
UI Kit
Accent

Scroll-Reisen

Eine Zahl, ein Bild oder eine Markierung reist beim Scrollen mit. Zähler durch Stationen, Daumenkino-Bilder und Wege, die sich selbst zeichnen.

3 Components · 13 Variants
Kategorie wechseln

Auf dieser Seite

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

number-journey

Zahlenreise

Eine große Zahl, die beim Scrollen durch Stufen reist. Sie zählt, lässt einen Balken wachsen, rollt mit ihrer Einheit weiter, trennt sich von einer zweiten Zahl oder füllt einen Ring, immer genau mit dem Scroll. Ohne JavaScript steht jede Stufe in einer Zahlenreihe.

Props und Details · Zahlenreise

Zählen durch die Jahre

Die Zahl zählt von Stufe zu Stufe und hält an jeder kurz, die Schiene darunter füllt sich, und der Text der Stufe steigt auf.

Im Studio öffnen

Zahl und Balken

Zahl und langer Balken wachsen zusammen, jede Stufe ist eine Marke darunter. Für Ersparnis, Kapazität oder alles, was sich summiert.

Im Studio öffnen

Zählwerk mit Einheiten

Eine Zahl je Stufe mit eigener Einheit, sie rollen weiter wie ein Zählwerk. Gemacht für Zeiten, die schrumpfen, von Tagen über Stunden zu Minuten.

Im Studio öffnen

Zwei Zahlen trennen sich

Zwei Zahlen ändern sich über die Jahre gegenläufig, daneben zeichnen sich zwei Linien. Der Akzent markiert die, auf die es ankommt.

Im Studio öffnen

Ring, der sich füllt

Ein Ring füllt sich beim Scrollen um eine Prozentzahl, die Stufen stehen links und rechts und leuchten auf, wenn der Ring sie erreicht.

Im Studio öffnen

image-sequence

Bildfolge

Ein gezeichnetes Bild, das sich beim Scrollen Bild für Bild verändert, wie ein Daumenkino. Ein Becher dreht sich, eine Lampe setzt sich zusammen, ein Haus geht vom Morgen in die Nacht, eine Pflanze wächst. In SVG gezeichnet, ohne Bilddateien, daneben wechseln die Schritte.

Props und Details · Bildfolge

Drehendes Produkt

Ein glasierter Becher dreht sich beim Scrollen einmal um seine Achse. Henkel und Stempel wandern herum, das Licht bleibt, wo es ist.

Im Studio öffnen

Teile fügen sich

Eine Schreibtischlampe beginnt in ihren Teilen, jedes beschriftet. Beim Scrollen kommen die Teile nacheinander an ihren Platz, vom Fuß aufwärts, und die Lampe geht an.

Im Studio öffnen

Vom Morgen in die Nacht

Ein Haus mit Solardach durch einen Tag. Die Sonne zieht über den Himmel, der Ertrag zählt mit, dann gehen die Fenster an und die Sterne auf.

Im Studio öffnen

Etwas wächst

Eine Pflanze wächst beim Scrollen aus dem Topf, der Stiel zeichnet sich, Blatt für Blatt, bis sie blüht. Für Wachstum jeder Art.

Im Studio öffnen

path-journey

Weg mit Stationen

Eine Markierung, die beim Scrollen einen Weg entlangfährt, der Weg zeichnet sich hinter ihr, und die Stationen leuchten auf. Ein Ablauf, eine Lieferung, ein Kreislauf oder ein Aufstieg als ein durchgehender Weg.

Props und Details · Weg mit Stationen

Gewundener Weg

Ein Weg windet sich von Karte zu Karte durch die Section, links und rechts, und wird am Layout gemessen, also passt jede Zahl an Schritten. Auf dem Telefon läuft er am linken Rand.

Im Studio öffnen

Paket unterwegs

Ein Paket fährt eine Straße vom Laden bis zur Tür, der Status darunter wechselt an jeder Station. Auf dem Telefon läuft die Straße nach unten.

Im Studio öffnen

Geschlossener Kreislauf

Eine Markierung fährt einen geschlossenen Ring, die erreichte Station erscheint in der Mitte. Für alles, was an seinen Anfang zurückkehrt, Reparatur, Nachfüllen, ein Jahresplan.

Im Studio öffnen

Aufstieg mit Höhe

Ein Aufstieg entlang eines Bergprofils, die Höhe zählt mit, und die Hütten am Weg leuchten auf. Für Touren, Trainingspläne oder jedes Ziel mit Etappen.

Im Studio öffnen

Oft gesucht

Direkt zu

In die Zwischenablage kopiert