Wobble Card
Die Karte verschiebt und skaliert sich leicht, wenn sich der Zeiger über ihr bewegt.
Einsatz
Promo-Karten
Varianten
- Wobble Card
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 „Wobble Card“-Effekt hinzu.
Wenn sich der Zeiger über die Karte bewegt, soll sie sich leicht zu ihm hin verschieben, während ihr Inhalt sich leicht in die Gegenrichtung verschiebt und etwas vergrößert, weich folgend, und beim Verlassen kehrt alles an seinen Platz zurück.
Halte die Bewegung klein und schalte sie auf Touch-Geräten und bei reduzierter Bewegung (prefers-reduced-motion) ab.Ähnliche Animationen
A
Zeiger hier bewegen
3D Tilt
Auch genannt Perspective tilt, 3D card effect, Tilt card, Tilt on hover, Parallax tilt
Eine Karte dreht sich perspektivisch zum Zeiger, und geschichtete Inhalte heben sich von der Oberfläche ab.
Einsatz
Produkt- und Preiskarten
Füge bei [wo] einen „3D Tilt“-Effekt hinzu (auch perspective tilt oder tilt card genannt).
Die Karte soll sich perspektivisch zum Zeiger neigen, während er sich bewegt, ihre inneren Ebenen heben sich in unterschiedlichen Tiefen ab, und beim Verlassen gleitet sie sanft zurück in die Ebene: weich und dezent.
Halte die Neigung sanft, damit der Text lesbar bleibt, und lass die Karte auf Touch-Geräten und bei reduzierter Bewegung (prefers-reduced-motion) flach.A
Zeiger hier bewegen
Magnetic Button
Auch genannt Magnetic target, Magnetic hover
Das Element wird zum Zeiger hingezogen, wenn er sich nähert, und schnellt zurück, sobald er sich entfernt.
Einsatz
CTA-Buttons, Navigations-Icons
Füge bei [wo] einen „Magnetic Button“-Effekt hinzu (auch magnetic target oder magnetic hover genannt).
Wenn sich der Zeiger nähert, soll der Button ein Stück zu ihm hingezogen werden, seine Beschriftung noch etwas weiter, und wenn der Zeiger weggeht, soll er mit einem kleinen federnden Nachschwingen an seinen Platz zurückkehren.
Das umgebende Layout darf sich nicht verschieben; schalte die Anziehung auf Touch-Geräten und bei reduzierter Bewegung (prefers-reduced-motion) ab.A
Zeiger hier bewegen
Glare / Holographic Card
Auch genannt Glare hover, Glare card, Magic card, Glare
Ein heller Glanzpunkt folgt dem Zeiger wie eine Spiegelung über die Kartenoberfläche.
Einsatz
Premium- oder Sammelkarten
Füge bei [wo] einen „Glare / Holographic Card“-Effekt hinzu (auch glare card oder glare hover genannt).
Ein weicher, heller Glanzpunkt soll dem Zeiger über die Kartenoberfläche folgen wie Licht, das sich darauf spiegelt, während sich die Karte leicht zum Zeiger neigt; beim Verlassen blendet beides aus: weich und dezent.
Lass Klicks durch die Glanzebene hindurch, halte den Inhalt darunter lesbar und zeige die Karte auf Touch-Geräten ohne Glanz.Mehr aus Hover
A
Mit der Maus darüberfahren
Ein farbiger Hintergrund wischt von einer Kante herein und schwingt elastisch leicht über.
Einsatz
Buttons
Füge bei [wo] einen „Background Bounce Sweep“-Hover-Effekt hinzu.
Eine neue Hintergrundfarbe soll von einer Kante hereinwischen, mit elastischem Nachfedern leicht über die gegenüberliegende Kante hinausschießen und sich dann setzen, während die Textfarbe wechselt, damit alles lesbar bleibt; beim Verlassen gleitet sie sanft wieder hinaus.
Halte den Text über der Füllung und zeige denselben Effekt beim Tastaturfokus.A
Mit der Maus darüberfahren
Background Fade
Auch genannt Color Fade
Hintergrund- und Textfarbe blenden beim Hovern weich in eine neue Farbe über.
Einsatz
Buttons, Navigationspunkte
Füge bei [wo] einen „Background Fade“-Hover-Effekt hinzu (auch color fade genannt).
Hintergrund- und Textfarbe sollen weich in neue Farben überblenden, solange der Zeiger über dem Element ist, und beim Verlassen zurückblenden: ruhig, ohne Bewegung.
Achte in beiden Zuständen auf genug Kontrast zwischen Text und Hintergrund und zeige denselben Effekt beim Tastaturfokus.A
Mit der Maus darüberfahren
Background Sweep
Auch genannt Background Fill, Slide Fill
Ein farbiger Hintergrund wischt beim Hovern von einer Kante aus über das Element.
Einsatz
Buttons, Menülinks
Füge bei [wo] einen „Background Sweep“-Hover-Effekt hinzu (auch background fill oder slide fill genannt).
Eine neue Hintergrundfarbe soll von der linken zur rechten Kante darüberwischen, weich und schnell, ohne Nachfedern, und sich beim Verlassen genauso zurückziehen, während die Textfarbe wechselt, damit alles lesbar bleibt.
Beschneide die Füllung auf die Form des Elements und zeige denselben Effekt beim Tastaturfokus.