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
Varianten
- X-axis flip
- Y-axis flip
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 „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.Ähnliche Animationen
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.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).A
Flip In
Auch genannt Flip In X, Flip In Y
Das Element dreht sich in 3D um seine waagerechte oder senkrechte Achse von der Kante aus, bis es dem Betrachter zugewandt ist.
Einsatz
Aufdecken von Karten und Kacheln
Füge bei [wo] eine „Flip In“-Einblendanimation hinzu (auch flip in X oder flip in Y genannt).
Das Element soll von der Kante aus starten und sich um seine waagerechte Achse zum Betrachter drehen, dabei leicht über das Ziel hinaus- und zurückschwingen, bevor es zur Ruhe kommt: schnell, mit kleinem Nachwackeln.
Gib ihm Perspektive, damit die Drehung als Tiefe wirkt, und zeige es bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation nach vorn gerichtet an.A
B
Mit der Maus darüberfahren
Card Flip
Auch genannt Flip card, Card flip 3D, 3D flip on hover
Eine Karte dreht sich um eine Achse halb herum und zeigt ihre Rückseite.
Einsatz
Teamkarten, Lernkarten, Preisdetails
Füge bei [wo] einen „Card Flip“-Effekt hinzu (auch flip card oder card flip 3D genannt).
Wenn der Zeiger über der Karte ist, soll sie sich perspektivisch um ihre senkrechte Achse umdrehen und ihre Rückseite zeigen, beim Verlassen dreht sie sich zurück: weich und gleichmäßig.
Blende die Rückseite jeder Fläche aus, damit die beiden nie durcheinander durchscheinen, und lass das Umdrehen auch beim Tastaturfokus und per Tippen auf Touch-Geräten funktionieren.Mehr aus Text
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.ABCDEFGHIJKLMNOPQRSTUVWX
Text Generate
Auch genannt Text Generate Effect
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.ABC DEFG HIJ KL
Text Highlighter (Textmarker)
Auch genannt Highlight Marker, Marker Underline, Hero Highlight
Ein farbiges Band wie von einem Textmarker zieht sich über eine Phrase, um sie hervorzuheben.
Einsatz
Hervorheben wichtiger Phrasen
Füge bei [wo] einen Textmarker-Effekt („Text Highlighter“) hinzu, auch highlight marker oder marker underline genannt.
Ein farbiges Band wie von einem Textmarker soll sanft von links nach rechts hinter die wichtige Phrase gleiten, als würde jemand sie mit einem Stift markieren.
Spiele ihn nur einmal ab, wenn die Phrase ins Bild scrollt, halte den Text auf dem Band gut lesbar und lass das Band der Phrase korrekt folgen, wenn sie auf zwei Zeilen umbricht.