Text Reveal Card
Auch genannt Spotlight Text Reveal
Wenn der Zeiger über eine Karte fährt, wird unter einer Maskenkante oder einem Spotlight verborgener Text sichtbar.
Einsatz
Feature-Karten
Varianten
- horizontal wipe
- circular spotlight
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 Reveal Card“-Effekt hinzu (auch spotlight text reveal genannt).
Wenn der Zeiger über die Karte fährt, soll ihm eine senkrechte Kante dicht folgen und auf einer Seite verborgenen Text freilegen: weich und direkt, ohne Verzögerung.
Auf Touch-Geräten, wo es keinen Zeiger gibt, soll Ziehen oder Tippen den verborgenen Text zeigen; mach den verborgenen Text außerdem für Screenreader zugänglich.Ähnliche Animationen
A
Mit der Maus darüberfahren
SVG Mask Reveal
Auch genannt SVG Mask Effect, Clip-path Reveal, Spotlight Mask
Eine Maskenform wischt über die Fläche oder folgt dem Zeiger und legt den Inhalt darunter frei.
Einsatz
Bild- und Inhaltsenthüllungen
Füge bei [wo] einen „SVG Mask Reveal“-Hover-Effekt hinzu (auch clip-path reveal oder spotlight mask genannt).
Solange der Zeiger darüber ist, soll eine kreisförmige Maske aus der Mitte wachsen und den Inhalt darunter freilegen und sich beim Verlassen wieder schließen: weich und recht schnell.
Halte beide Ebenen exakt gleich groß, damit sich nichts verschiebt, und zeig dieselbe Enthüllung bei Tastaturfokus und Antippen.- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
Zeiger hier bewegen
Cursor Spotlight
Auch genannt Flashlight cursor, Spotlight effect
Ein Lichtkreis um den Zeiger enthüllt den Inhalt, während der Rest dunkel bleibt.
Einsatz
Hero-Bereiche, Enthüllungseffekte
Füge bei [wo] einen „Cursor Spotlight“-Effekt hinzu (auch flashlight cursor oder spotlight effect genannt).
Ein weicher Lichtkreis soll dem Zeiger folgen und den Inhalt darunter sichtbar machen, während der Rest des Bereichs abgedunkelt bleibt.
Zeige auf Touch-Geräten, wo es keinen Zeiger zum Folgen gibt, den Inhalt stattdessen voll ausgeleuchtet.A
B
Ziehen
Before-After Slider (Vorher-Nachher-Slider)
Auch genannt Image comparison slider, Compare slider
Ein ziehbarer Trenner zeigt auf der einen Seite ein Bild und auf der anderen ein zweites.
Einsatz
Bildretusche, Produktvergleiche
Füge bei [wo] einen Vorher-Nachher-Slider (Before-After Slider) hinzu, auch image comparison slider oder compare slider genannt.
Zwei Bilder liegen übereinander, und das Ziehen eines senkrechten Trenners zeigt mehr vom einen und weniger vom anderen; der Trenner folgt dem Zeiger direkt ohne Verzögerung.
Starte mit dem Trenner in der Mitte und lass ihn per Touch und mit den Pfeiltasten bedienen.ABCDABCD
Mit der Maus darüberfahren
Text Hover Effect
Auch genannt Gradient Outline Text Hover, Text Fill on Hover
Ein Wort in Umrissschrift wird von einem Verlauf gefüllt oder beleuchtet, der dem Zeiger folgt oder darüber streicht.
Einsatz
Große Display-Wörter, Footer
Füge bei [wo] einen „Text Hover Effect“ hinzu (auch text fill on hover oder gradient outline text hover genannt).
Das Wort soll zunächst nur als Umriss erscheinen; solange der Zeiger darüber ist, soll sich eine volle Füllung sanft von links nach rechts hineinschieben und beim Verlassen wieder zurückziehen.
Halte das Umrisswort vor dem Füllen gut lesbar und zeige denselben Effekt beim Tastaturfokus.Mehr aus Text
A
Q
J
P
N
V
Y
HB
K
M
L
Z
W
T
XC
R
G
Q
J
P
N
VD
Y
H
K
M
L
Z
WE
T
X
R
G
Q
J
PF
N
V
Y
H
K
M
L
Mit der Maus darüberfahren
Text Scramble
Auch genannt ScrambleText, Text Decode, Encrypted Text, Text Unscramble, Hyper Text
Der Text wird durch zufällige Zeichen ersetzt, die wechseln und sich nach und nach zum endgültigen Wort auflösen.
Einsatz
Hero-Titel im Tech-Stil, Link-Hover
Füge bei [wo] einen „Text Scramble“-Hover-Effekt hinzu (auch text decode oder encrypted text genannt).
Wenn der Zeiger über den Text fährt, soll jeder Buchstabe schnell durch zufällige Zeichen flackern und auf seinem echten Buchstaben landen, einer nach dem anderen von links nach rechts.
Verhindere, dass die Textbreite beim Durchmischen springt, lass Screenreader den echten Text lesen und zeige denselben Effekt beim Tastaturfokus.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.ABC DEFG
Typewriter (Schreibmaschineneffekt)
Auch genannt Typing Animation, Typewriter Effect, Typing Text
Die Zeichen erscheinen einzeln, als würden sie getippt, meist gefolgt von einer blinkenden Einfügemarke.
Einsatz
Hero-Headlines, Taglines
Füge bei [wo] einen Schreibmaschineneffekt (Typewriter) hinzu, auch typing animation oder typing text genannt.
Die Zeichen sollen einzeln in gleichmäßigem Tipptempo erscheinen, mit einer Einfügemarke direkt hinter dem zuletzt getippten Zeichen, die nach dem Tippen ein paar Mal blinkt.
Spiele ihn nur einmal statt in Schleife ab, lass Screenreader sofort den ganzen Text lesen und zeige bei reduzierter Bewegung (prefers-reduced-motion) gleich den vollständigen Text.