Spinning Text
Auch genannt Circular Text, Text on Circle
Der Text ist um einen Kreis gesetzt, der sich ununterbrochen dreht.
Einsatz
Rotierende Badges und Stempel
Varianten
- clockwise
- counter-clockwise
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] „Spinning Text“ hinzu (auch circular text oder text on circle genannt).
Die Buchstaben sollen gleichmäßig um einen Kreis verteilt sein, der sich langsam und gleichmäßig dreht, ohne Sprung beim Neustart der Schleife.
Gib Screenreadern den Text einmal als normalen Text und stoppe die Drehung bei reduzierter Bewegung (prefers-reduced-motion).Ähnliche Animationen
Spin
Auch genannt Rotate Loop, Spinner
Das Element dreht sich fortlaufend mit gleichbleibender Geschwindigkeit.
Einsatz
Lade-Spinner
Füge bei [wo] einen „Spin“-Effekt hinzu (auch spinner oder rotate loop genannt).
Das Element soll sich fortlaufend mit konstanter, gleichmäßiger Geschwindigkeit drehen, ohne Easing zwischen den Umdrehungen.
Mach die Schleife nahtlos, gib dem Spinner ein barrierefreies Lade-Label und verlangsame oder stoppe ihn bei reduzierter Bewegung (prefers-reduced-motion).A
Orbiting Circles
Auch genannt Orbit Animation, Orbit, Orbiting icons
Kleine Kreise oder Icons kreisen auf runden Bahnen um einen Mittelpunkt.
Einsatz
Integrationsdiagramme
Füge bei [wo] „Orbiting Circles“ hinzu (auch orbit animation oder orbiting icons genannt).
Kleine Kreise sollen langsam und gleichmäßig auf runden Ringen um ein zentrales Element kreisen, wobei sich der äußere Ring in die Gegenrichtung und langsamer dreht.
Halte die Schleife nahtlos und die kreisenden Elemente aufrecht, und stoppe die Drehung bei reduzierter Bewegung (prefers-reduced-motion).Darin scrollen
Text Path Scroll
Auch genannt Text Path Curve Scroll Animation
Der Text folgt einem gekrümmten Pfad und wandert beim Scrollen daran entlang.
Einsatz
Storytelling-Abschnitte
Füge bei [wo] einen „Text Path Scroll“-Effekt hinzu (auch text path curve scroll animation genannt).
Der Text soll auf einer geschwungenen Linie sitzen und beim Scrollen daran entlanggleiten: vorwärts beim Herunterscrollen, zurück beim Hochscrollen.
Kopple die Bewegung ohne Verzögerung direkt an die Scrollposition und halte den Text für Screenreader als normalen Text lesbar.Mehr aus Text
ABCDEF
Split Text Stagger
Auch genannt Letter Stagger, Staggered Text Reveal, SplitText, Splitting.js text
Eine Überschrift wird in Zeichen, Wörter oder Zeilen zerlegt, die mit kleiner Verzögerung nacheinander einlaufen.
Einsatz
Headlines und Abschnittstitel
Füge bei [wo] einen „Split Text Stagger“-Einstieg hinzu (auch letter stagger oder staggered text reveal genannt).
Zerlege die Überschrift in Buchstaben, die mit kurzer Verzögerung nacheinander nach oben gleiten und einblenden, schnell und weich, ohne Nachfedern.
Spiele ihn einmal ab, wenn die Überschrift ins Bild kommt, sorge dafür, dass Screenreader sie als ein Wort lesen, und zeige sie bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation.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.ABCDEF
Squiggly Text
Auch genannt Wobbly Text, Turbulence Text
Die Buchstabenkanten zittern wie handgezeichnet – erzeugt mit einem SVG-Displacement-Filter.
Einsatz
Skizzenhafte oder verspielte Überschriften
Füge bei [wo] einen „Squiggly Text“-Effekt hinzu (auch wobbly text oder turbulence text genannt).
Die Buchstabenkanten sollen leicht wackeln, als würden sie mehrmals pro Sekunde von Hand neu gezeichnet: ein dezentes, zittriges Brodeln statt einer weichen Welle.
Halte den Text lesbar und lass ihn bei reduzierter Bewegung (prefers-reduced-motion) still stehen.