Odometer
Auch genannt Rolling Numbers, Animated Number, AnimateNumber, Slot-Machine Digits
Bei jeder Zahlenänderung rollt jede Ziffer vertikal zum neuen Wert.
Einsatz
Live-Zähler und Preise
Varianten
- digit roll
- slide with fade
- themed odometer
Prompt
Ersetze [wo] durch die Stelle auf deiner Seite und füge den Prompt in deinen KI-Agenten ein. Jeder Prompt enthält den Namen der Animation – beim nächsten Mal reicht es, sie beim Namen zu nennen.
Füge bei [wo] eine „Odometer“-Zahlenanimation hinzu (auch rolling numbers oder slot-machine digits genannt).
Ändert sich der Wert, soll jede Ziffer vertikal zu ihrer neuen Ziffer rollen, immer vorwärts, mit leichter Staffelung zwischen den Ziffern und einem kleinen Einrasten am Ende.
Halte alle Ziffern gleich breit, damit sich die Zahl nicht verschiebt, und gib Screenreadern nur den Endwert aus.Ähnliche Animationen
- %
Number Ticker
Auch genannt Count Up, Animated Counter, Number Counter, countUp
Eine Zahl zählt von einem Start- zu einem Zielwert hoch, sobald sie sichtbar wird.
Einsatz
Kennzahlen und KPI-Blöcke
Füge bei [wo] einen „Number Ticker“ hinzu (auch count up oder animated counter genannt).
Sobald die Zahl ins Bild kommt, soll sie von null bis zu ihrem Zielwert hochzählen, anfangs schnell und zum Ende hin sanft abbremsend.
Nutze Ziffern mit fester Breite, damit drumherum nichts zittert, zähle nur einmal und zeige Screenreadern sowie bei reduzierter Bewegung (prefers-reduced-motion) sofort den Endwert.H
G
F
E
D
C
BK
J
I
H
G
F
EN
M
L
K
J
I
HQ
P
O
N
M
L
KT
S
R
Q
P
O
N
Split-Flap Text (Fallblattanzeige)
Auch genannt Text Flipping Board, Flip Board, Vestaboard display
Die Zeichen blättern um wie auf einer Abflugtafel am Flughafen, bis der Zielbuchstabe erscheint.
Einsatz
Statustafeln und Retro-Anzeigen
Füge bei [wo] eine Fallblattanzeige (Split-Flap Text) hinzu – auch text flipping board oder flip board genannt.
Jedes Zeichenfeld soll schnell durch das Alphabet blättern, bis es auf seinem Zielbuchstaben landet, wobei die Felder nacheinander von links nach rechts zur Ruhe kommen.
Lass sie jedes Mal einmal laufen, wenn der Text erscheint oder sich ändert, gib Screenreadern nur den finalen Text aus und zeige bei reduzierter Bewegung (prefers-reduced-motion) den finalen Text ohne Blättern.ABDEFGHIJKLDEFMN
Word Rotate
Auch genannt Rotating Words, Flip Words, Container Text Flip, Layout Text Flip, Rotating Text Wheel
Ein Wort im Satz wird per Gleiten, Drehen oder Überblenden durch das nächste Wort einer Liste ersetzt.
Einsatz
Hero-Taglines
Füge bei [wo] einen „Word Rotate“-Effekt hinzu (auch rotating words oder flip words genannt).
Ein Wort in der Zeile soll nach oben hinausgleiten, während das nächste Wort aus einer Liste von unten hereinkommt, mit einer Pause auf jedem Wort vor dem nächsten Wechsel.
Verhindere, dass der Rest der Zeile bei unterschiedlich breiten Wörtern springt, lass Screenreader nicht jeden Wechsel ansagen und stoppe den Wechsel bei reduzierter Bewegung (prefers-reduced-motion).Mehr aus Data & Numbers
Animated Map Arcs
Auch genannt World Map Animated Lines, Globe Arcs
Linien und Punkte bewegen sich animiert zwischen Orten auf einer Karte oder einem Globus.
Einsatz
Visuals zur globalen Reichweite
Füge bei [wo] „Animated Map Arcs“ hinzu (auch globe arcs genannt).
Gekrümmte Linien sollen sich nacheinander zwischen Orten auf einer Punktekarte selbst zeichnen und sich dann zu ihrem Ziel zurückziehen, während dort ein weicher Ring pulsiert: ruhig und gleichmäßig.
Versetze die Bögen zeitlich, damit sie sich nie im Gleichtakt bewegen, halte die Schleife nahtlos und pausiere sie bei reduzierter Bewegung (prefers-reduced-motion).Bar Chart Grow
Auch genannt Animated Bar Chart, Bar Chart Entrance
Balken wachsen von der Höhe null bis zu ihren Datenwerten.
Einsatz
Dashboards und Berichte
Füge bei [wo] eine „Bar Chart Grow“-Animation hinzu (auch animated bar chart oder bar chart entrance genannt).
Jeder Balken soll nacheinander in schneller Staffelung von der Grundlinie auf seinen Wert wachsen und beim Ankommen weich abbremsen.
Spiele sie einmal ab, wenn das Diagramm ins Bild kommt, und zeige bei reduzierter Bewegung (prefers-reduced-motion) sofort das fertige Diagramm.A
B
C
D
Bar Chart Race
Auch genannt Racing Bar Chart
Horizontale Balken tauschen im Zeitverlauf ihre Ränge, während sich die Werte ändern.
Einsatz
Storytelling mit Zeitreihen
Füge bei [wo] ein „Bar Chart Race“ hinzu (auch racing bar chart genannt).
Horizontale Balken sollen wachsen und schrumpfen, während sich die Werte über die Zeit ändern, und bei jedem Rangwechsel weich aneinander vorbeigleiten, jeder mit seinem Label.
Bewege die Balken mit Transforms statt das Markup umzusortieren, damit Wechsel gleiten statt springen, und gib Nutzern eine Möglichkeit, es zu pausieren.