Morphing Text
Auch genannt Text Morph
Ein Wort verschwimmt an derselben Stelle und geht fließend ins nächste über.
Einsatz
Hero-Slogans
Varianten
- blur threshold morph
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] einen „Morphing Text“-Effekt hinzu (auch text morph genannt).
Ein Wort soll an derselben Stelle verschwimmen und mit einem weichen, zähflüssigen Übergang ins nächste verschmelzen und dann kurz stillstehen, bevor der nächste Wechsel kommt.
Wechsle die Wörter nahtlos durch, lass Screenreader die Wörter als normalen Text lesen und stoppe den Wechsel bei reduzierter Bewegung (prefers-reduced-motion).Ähnliche Animationen
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).AWBXCYDZ
Text Replacement
Auch genannt Text Swap
Vorhandener Text wird animiert ausgeblendet und durch neuen Text ersetzt.
Einsatz
Wechselnde Beschriftungen
Füge bei [wo] einen „Text Replacement“-Effekt hinzu (auch text swap genannt).
Wenn sich der Text ändert, sollen die alten Zeichen nach oben hinausgleiten und die neuen von unten hereinkommen, Zeichen für Zeichen in einer schnellen, weichen Welle.
Verhindere, dass die Textbox beim Wechsel in der Größe springt, und lass Screenreader nur den neuen Text ansagen.ABCD
Blur In
Auch genannt Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
Das Element startet stark verschwommen und wird scharf, oft während es hereingleitet oder einblendet.
Einsatz
Einblenden von Überschriften und Hero-Texten
Füge bei [wo] eine „Blur In“-Einblendanimation hinzu (auch text focus in, focus in oder blur text reveal genannt).
Der Inhalt soll stark verschwommen und transparent beginnen und dann an seinem Platz scharf werden: weich und eher langsam, ohne Bewegung.
Spiele sie nur einmal ab und zeige den Text bei reduzierter Bewegung (prefers-reduced-motion) sofort scharf an.Mit der Maus darüberfahren
Gooey Effect
Auch genannt Goo Effect, Liquid Blob Merge, Metaball Effect, Gooey / Liquid Metaball, Metaballs, Liquid blobs
Nahe Formen verschmelzen per Weichzeichner- und Kontrastfilter wie flüssige Tropfen miteinander.
Einsatz
Menüs, Cursor und Paginierung
Füge bei [wo] einen „Gooey Effect“ hinzu (auch goo effect oder metaballs genannt).
Solange der Zeiger darüber ist, sollen sich kleine Tropfen von der Hauptform lösen, sich dabei wie Flüssigkeit dehnen und dann abreißen; verlässt der Zeiger die Fläche, fließen sie zurück und verschmelzen weich.
Wende den Weichzeichner- und Kontrastfilter nur auf die kleine Gruppe von Formen an, nicht auf die ganze Seite, und zeig denselben Effekt bei Tastaturfokus und Antippen.Mehr aus Text
ABCDEF
Neon Glow Text
Auch genannt Neon Sign Flicker, Glowing Text
Der Text leuchtet wie eine Neonröhre und flackert oder pulsiert.
Einsatz
Nachtleben- und Gaming-Themen
Füge bei [wo] einen „Neon Glow Text“-Effekt hinzu (auch neon sign flicker oder glowing text genannt).
Der Text soll wie eine Neonröhre mit weichem, gleichmäßigem Licht leuchten und hin und wieder kurz ausflackern wie ein echtes Leuchtschild.
Lass das Flackern nur gelegentlich und nicht schnell auftreten, weil schnelles Blinken manchen Menschen schaden kann, und halte das Leuchten bei reduzierter Bewegung (prefers-reduced-motion) konstant.A
E
I
MB
F
J
NC
G
K
OD
H
L
PQ
R
S
T
Darin scrollen
Scrolling Letters
Auch genannt On-Scroll Letter Animations
Die Buchstaben eines Titels wechseln oder bewegen sich nacheinander, während man durch die Abschnitte scrollt.
Einsatz
Abschnittsanzeigen
Füge bei [wo] „Scrolling Letters“ hinzu (auch on-scroll letter animations genannt).
Während man durch die Abschnitte scrollt, sollen die Buchstaben des Titels nacheinander von links nach rechts zum nächsten Zeichen weiterrollen, direkt an die Scrollposition gekoppelt.
Beim Zurückscrollen sollen sie zurückrollen, und Screenreader sollen den aktuellen Titel als normalen Text erhalten.ABC DEFGH
Shimmer Text
Auch genannt Animated Shiny Text, Metallic Shimmer Text, Gradient Text Shimmer
Ein heller Glanz streicht immer wieder über die Buchstaben.
Einsatz
Badges und Ankündigungs-Pills
Füge bei [wo] einen „Shimmer Text“-Effekt hinzu (auch animated shiny text oder metallic shimmer text genannt).
Ein Lichtstreifen soll weich von links nach rechts über die Buchstaben gleiten und sich nach einer kurzen Pause wiederholen.
Halte den Text unter dem Glanz lesbar und lass ihn bei reduzierter Bewegung (prefers-reduced-motion) still stehen.