Kinetic Typography
Auch genannt Kinetic Text
Text skaliert, bewegt oder dreht sich als bewegtes Grafikelement statt als statischer Fließtext.
Einsatz
Marken-Hero-Bereiche
Varianten
- repeating rows
- scroll-linked
- rotating letters
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] „Kinetic Typography“ hinzu (auch kinetic text genannt).
Zeilen aus großem, wiederholtem Text sollen langsam und gleichmäßig abwechselnd in entgegengesetzte Richtungen seitwärts gleiten und die Wörter so zu einer bewegten Grafik machen.
Lass jede Zeile nahtlos ohne sichtbaren Sprung laufen, sorg dafür, dass Screenreader den Text nur einmal vorlesen, und stoppe die Bewegung bei reduzierter Bewegung (prefers-reduced-motion).Ähnliche Animationen
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.ABCDEF
Wavy Text
Auch genannt Text Wave
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).ABCABCABCABCABC
Darin scrollen
Text Repetition
Auch genannt Repeated Text Scroll
Ein Wort wird in viele gestapelte Kopien vervielfältigt, die sich beim Scrollen verschieben.
Einsatz
Portfolio-Titel
Füge bei [wo] einen „Text Repetition“-Effekt hinzu (auch repeated text scroll genannt).
Ein Wort soll in einen Stapel blasserer Umrisskopien vervielfältigt werden, die sich beim Scrollen hinter ihm auffächern und beim Hochscrollen wieder zusammenfalten.
Kopple das Auffächern direkt an die Scrollposition und verstecke die zusätzlichen Kopien vor Screenreadern, damit das Wort nur einmal vorgelesen wird.ABCDEF
Zeiger hier bewegen
Text Tilt
Auch genannt Perspective Text Tilt
Der Text neigt sich in 3D-Perspektive und folgt dabei der Mausposition.
Einsatz
Hero-Überschriften
Füge bei [wo] einen „Text Tilt“-Effekt hinzu (auch perspective text tilt genannt).
Der Text soll sich sanft in 3D zum Zeiger neigen, ihm beim Bewegen weich folgen und beim Verlassen sanft wieder flach werden.
Halte die Neigung dezent, damit der Text lesbar bleibt, und lass ihn auf Touch-Geräten und bei reduzierter Bewegung (prefers-reduced-motion) flach.Mehr aus Text
ABCDEF
Mit der Maus darüberfahren
Letter Scatter
Auch genannt Explosive Letter Burst, Scatter Gather Letters
Buchstaben fliegen beim Hovern auseinander und kehren zurück oder platzen beim Erscheinen nach außen.
Einsatz
Verspielte Links
Füge bei [wo] einen „Letter Scatter“-Hover-Effekt hinzu (auch scatter gather letters oder explosive letter burst genannt).
Fährt der Zeiger über den Text, soll jeder Buchstabe ein kurzes Stück in seine eigene Richtung fliegen und sich dabei leicht drehen; verlässt der Zeiger den Text, sammeln sie sich weich wieder zum Wort.
Halte den Platz des Worts im Layout fest, während die Buchstaben sich bewegen, lass Screenreader es als ein Wort lesen und zeige denselben Effekt beim Tastaturfokus.ABCDEFABCDEF
Line Shadow Text
Auch genannt Text Shadow Animation, Dancing Shadow
Ein gestreifter oder versetzter Schatten hinter den Buchstaben bewegt sich in eine Richtung.
Einsatz
Kräftige Display-Überschriften
Füge bei [wo] einen „Line Shadow Text“-Effekt hinzu (auch text shadow animation oder dancing shadow genannt).
Hinter den Buchstaben soll ein versetzter Schatten aus dünnen diagonalen Streifen langsam und stetig gleiten, während die Buchstaben selbst ruhig und scharf bleiben.
Lass die Streifenbewegung nahtlos loopen und den Schatten bei reduzierter Bewegung (prefers-reduced-motion) stillstehen.Liquid Fill Text
Auch genannt Water Fill Text
Buchstaben füllen sich mit einer steigenden, wogenden Flüssigkeit.
Einsatz
Ladeanzeigen und verspielte Titel
Füge bei [wo] einen „Liquid Fill Text“-Effekt hinzu (auch water fill text genannt).
Die konturierten Buchstaben sollen sich mit Flüssigkeit füllen, deren wellige Oberfläche seitwärts rollt, während der Pegel langsam steigt und sinkt – als weiche, durchgehende Schleife.
Halte das Wort als echten Text für Screenreader verfügbar und lass die Flüssigkeit bei reduzierter Bewegung (prefers-reduced-motion) auf einem ruhigen Pegel stehen.