Pointer Highlight
Ein Zeigerpfeil zeichnet einen Markierungsrahmen um ein Wort, sobald der Text ins Bild scrollt.
Einsatz
Headlines, Marketingtexte
Varianten
- Pointer Highlight
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 „Pointer Highlight“-Effekt hinzu.
Wenn der Text ins Bild scrollt, soll sich ein Rahmen von links nach rechts um das Schlüsselwort zeichnen, während ein kleiner Zeigerpfeil an seiner Ecke entlangfährt, weich und gleichmäßig, als würde jemand das Wort von Hand markieren.
Zeichne ihn nur beim ersten Erscheinen, ohne den Text zu verschieben, und zeige den fertigen Rahmen bei reduzierter Bewegung (prefers-reduced-motion) sofort an.Ähnliche Animationen
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.ABC DEF
Mit der Maus darüberfahren
Underline Draw
Auch genannt Animated Underline, Hover Underline Animation, Underline Stretch, Underline Grow, Underline Slide, Underline From Left
Beim Hovern wächst unter einem Link eine Unterstreichung von einer Seite oder aus der Mitte heraus.
Einsatz
Navigationslinks, Inline-Links
Füge bei [wo] einen „Underline Draw“-Hover-Effekt hinzu (auch animated underline oder hover underline animation genannt).
Wenn der Zeiger über dem Link ist, soll unter dem Text eine Unterstreichung sanft von links nach rechts wachsen und beim Verlassen wieder schrumpfen: schnell und dezent.
Verhindere, dass die Unterstreichung das umgebende Layout verschiebt, und zeige denselben Effekt beim Tastaturfokus.Line Drawing
Auch genannt Path Drawing, Stroke Dash Animation, Self-Drawing SVG, DrawSVG, Line Draw, SVG Path Draw, Stroke draw, Checkmark draw
Eine SVG-Kontur scheint sich entlang ihres Pfads selbst zu zeichnen, indem der Dash-Offset animiert wird.
Einsatz
Icons, Logos und Illustrationen
Füge bei [wo] eine „Line Drawing“-Animation hinzu (auch path drawing oder self-drawing SVG genannt).
Jede Linie soll sich scheinbar selbst weich entlang ihres Pfads von Anfang bis Ende zeichnen, und eine zweite Linie wie ein Häkchen folgt direkt nach der ersten.
Spiele sie einmal ab, wenn sie ins Bild kommt, statt sie zu wiederholen, und zeige bei reduzierter Bewegung (prefers-reduced-motion) die fertig gezeichneten Linien.Mehr aus Micro-interaction
A
Klicken
Press (Button Tap Scale)
Auch genannt Tap feedback, Active scale, Press state
Das Element schrumpft beim Drücken leicht und federt beim Loslassen zurück.
Einsatz
Buttons, Karten
Füge bei [wo] einen „Press (Button Tap Scale)“-Effekt hinzu (auch tap feedback oder press state genannt).
Solange es gedrückt wird, soll das Element leicht schrumpfen und etwas dunkler werden und beim Loslassen mit einem kleinen Federn auf volle Größe zurückspringen: schnell und dezent.
Zeige dasselbe Feedback bei Tastatur und Touch und verhindere, dass sich das umgebende Layout verschiebt.Ziehen
Pull to Refresh
Auch genannt Swipe to refresh
Zieht man eine Liste nach unten, erscheint ein Ladekreisel, und beim Loslassen wird der Inhalt neu geladen.
Einsatz
Feeds, Posteingänge
Füge bei [wo] eine „Pull to Refresh“-Interaktion hinzu (auch swipe to refresh genannt).
Wird die Liste oben nach unten gezogen, soll sie dem Finger mit etwas Widerstand folgen und einen Ladekreisel zeigen, der sich beim Ziehen dreht; nach dem Loslassen dreht er sich weiter, während der Inhalt neu lädt, dann gleitet die Liste sanft wieder nach oben.
Starte es nur, wenn die Liste schon ganz oben ist, und biete Tastatur- und Screenreader-Nutzern zusätzlich einen normalen Aktualisieren-Button.Klicken
Ripple
Auch genannt Material ripple, Touch ripple, Ripple Button, Ink ripple
Eine kreisförmige Welle breitet sich vom genauen Klick- oder Tippunkt aus und verblasst.
Einsatz
Buttons, Listeneinträge
Füge bei [wo] einen „Ripple“-Effekt hinzu (auch material ripple oder ink ripple genannt).
Bei jedem Klick oder Tippen soll sich eine weiche, kreisförmige Welle vom genauen Druckpunkt ausbreiten, bis sie das Element bedeckt, und dabei verblassen: schnell und leicht.
Beschneide die Welle auf die Form des Elements, lass jeden schnellen Druck seine eigene Welle starten und starte sie bei Tastatureingaben aus der Mitte.