Squiggly Text
Auch genannt Wobbly Text, Turbulence Text
Die Buchstabenkanten zittern wie handgezeichnet – erzeugt mit einem SVG-Displacement-Filter.
Einsatz
Skizzenhafte oder verspielte Überschriften
Varianten
- continuous
- hover only
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 „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.Ähnliche Animationen
ABC
ABC
Mit der Maus darüberfahren
SVG Displacement Distortion
Auch genannt feTurbulence Distortion, Displacement Map Effect
Ein SVG-Filter verzerrt Text oder Formen mit animiertem Rauschen.
Einsatz
Flüssigkeits- oder Wellen-Hover
Füge bei [wo] einen „SVG Displacement Distortion“-Hover-Effekt hinzu (auch displacement map effect genannt).
Solange der Zeiger darüber ist, soll der Text oder die Form wellen und wabern, als sähe man sie durch bewegtes Wasser, sanft einsetzend, und beim Verlassen wieder scharf werden.
Wende den Verzerrungsfilter nur an, solange der Effekt aktiv ist, damit er im Ruhezustand nichts kostet, und zeig denselben Effekt bei Tastaturfokus.ABCDEFGHIJABCDEFGHIJ
Text Distortion
Auch genannt Organic Text Distortion
Der Text verzerrt und kräuselt sich organisch, angetrieben durch Scrollen oder Zeigerbewegung.
Einsatz
Experimentelle Portfolios
Füge bei [wo] einen „Text Distortion“-Effekt hinzu (auch organic text distortion genannt).
Eine Textzeile soll endlos seitwärts fließen und sich dabei organisch verzerren und kräuseln, als sähe man sie durch bewegtes Wasser, wobei das Scrollen den Fluss antreibt.
Halte die Verzerrung so leicht, dass der Text lesbar bleibt, sorge dafür, dass sie auch auf langsameren Geräten flüssig läuft, und schalte sie bei reduzierter Bewegung (prefers-reduced-motion) ab.ABCDEF
Die Buchstaben tropfen und ziehen sich nach unten, als würden sie schmelzen.
Einsatz
Horror- oder Spaßtitel
Füge bei [wo] einen „Melting Text“-Effekt hinzu.
Die Buchstaben sollen langsam nach unten sacken, während sich darunter Tropfen in die Länge ziehen, als würden sie schmelzen, und dann in einem ruhigen, geschmolzenen Zustand stehen bleiben.
Spiele ihn einmal ab, wenn der Text ins Bild kommt, halte das Wort am Ende lesbar und verzichte bei reduzierter Bewegung (prefers-reduced-motion) auf die Animation.Mehr aus Text
ABC DEFGHI JKLMNO PQR
Darin scrollen
Sticky Text Fade
Auch genannt Sticky Scroll Text Opacity Fade
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.Stroke Text Draw
Auch genannt Draw In Text, Animated Stroke Text
Die Buchstabenumrisse werden als Linie gezeichnet, bevor die Füllung erscheint.
Einsatz
Logos und Hero-Wörter
Füge bei [wo] einen „Stroke Text Draw“-Effekt hinzu (auch draw in text oder animated stroke text genannt).
Die Buchstabenumrisse sollen sich weich selbst zeichnen, und sobald sie vollständig sind, soll die Füllung einblenden.
Spiele ihn einmal beim Laden ab, halte das Wort als echten Text zugänglich und zeige bei reduzierter Bewegung (prefers-reduced-motion) sofort den gefüllten Text.AGBHCIDJEKFL
Mit der Maus darüberfahren
Text 3D Flip
Auch genannt 3D Flip Text Reveal
Buchstaben oder Wörter drehen sich in 3D um eine Achse und zeigen auf ihrer Rückseite den nächsten Text.
Einsatz
Hover-Links und Überschriften
Füge bei [wo] einen „Text 3D Flip“-Hover-Effekt hinzu (auch 3D flip text reveal genannt).
Wenn der Zeiger über dem Text ist, soll jeder Buchstabe in 3D um seine waagerechte Achse kippen und auf seiner anderen Seite einen neuen Buchstaben zeigen, nacheinander in einer schnellen, weichen Welle, und zurückkippen, wenn der Zeiger den Text verlässt.
Halte die Textbox während des Kippens gleich groß und zeige denselben Effekt beim Tastaturfokus.