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] 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.
Die Elemente einer Gruppe animieren nacheinander mit kleiner Verzögerung und bilden eine Welle, statt alle gleichzeitig zu erscheinen.
Einsatz
Listen, Raster, Navigationsmenüs und Suchergebnisse
Füge bei [wo] eine „Stagger“-Animation hinzu (auch staggered animation oder Kaskade genannt).
Die Elemente sollen nacheinander mit kurzer, gleichmäßiger Verzögerung nach oben einblenden, sodass die Gruppe wie eine schnelle Welle wirkt statt alles auf einmal.
Halte die ganze Sequenz auch bei langen Listen kurz, spiele sie nur einmal beim Hineinscrollen ab und zeige bei reduzierter Bewegung (prefers-reduced-motion) alles ohne Animation an.
Die Wörter blenden beim Laden der Seite nacheinander ein, oft während sich eine Unschärfe auflöst, als würden sie gerade generiert.
Einsatz
Einleitungstexte im KI-Stil
Füge bei [wo] einen „Text Generate“-Effekt hinzu.
Die Wörter sollen nacheinander einblenden, während sich bei jedem eine weiche Unschärfe auflöst, als würde der Text gerade generiert: gleichmäßig und ruhig.
Spiele ihn beim Laden nur einmal ab, lass Screenreader sofort den ganzen Text lesen und zeige ihn bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation an.
Auch genanntLine Mask Reveal, Split Text Overflow Hidden Reveal, Text Masking
Der Text gleitet hinter einer Schnittkante nach oben, als tauche er aus dem Nichts auf.
Einsatz
Redaktionelle Schlagzeilen
Füge bei [wo] einen „Mask Reveal“-Texteinstieg hinzu (auch line mask reveal oder text masking genannt).
Jede Zeile soll hinter einer unsichtbaren Kante nach oben gleiten, als tauche sie aus dem Nichts auf, eine nach der anderen, schnell und weich, ohne Nachfedern.
Spiele ihn einmal ab, wenn der Text ins Bild scrollt, und zeige den Text bei reduzierter Bewegung (prefers-reduced-motion) sofort ohne Animation.
Die Buchstaben wippen nacheinander auf und ab, sodass eine Welle durch das Wort läuft.
Einsatz
Verspielte Überschriften, Ladeanzeigen
Füge bei [wo] einen „Wavy Text“-Effekt hinzu (auch text wave genannt).
Die Buchstaben sollen nacheinander auf und ab wippen, sodass ständig eine sanfte, weiche Welle durch das Wort läuft.
Lass die Schleife nahtlos laufen, sorge dafür, dass Screenreader es als ein Wort lesen, und stoppe die Welle bei reduzierter Bewegung (prefers-reduced-motion).
Mehr aus Text
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
Auch genanntText 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.
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.
Der Text bleibt fixiert, während seine Zeilen mit dem Scrollfortschritt ein- und ausblenden.
Einsatz
Scrollytelling
Füge bei [wo] einen „Sticky Text Fade“-Effekt hinzu (auch sticky scroll text opacity fade genannt).
Während der Abschnitt scrollt, soll der Textblock fixiert bleiben und seine Zeilen sollen nacheinander mit dem Scrollfortschritt ein- und ausblenden.
Kopple die Überblendungen direkt an die Scrollposition, damit sie sich beim Zurückscrollen umkehren, und halte jede Zeile unabhängig von ihrer Deckkraft für Screenreader verfügbar.