Die Karte verschiebt und skaliert sich leicht, wenn sich der Zeiger über ihr bewegt.
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.
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.
Mit der Maus darüberfahren
Auch genannt Pin hover 3D
Eine Karte kippt beim Hovern perspektivisch nach hinten, während ein Pin mit Leuchten zum Betrachter aufsteigt.
Einsatz
Link-Vorschaukarten
Füge bei [wo] einen „3D Pin“-Hover-Effekt hinzu (auch pin hover 3D genannt).
Wenn der Zeiger über der Karte ist, soll sie perspektivisch nach hinten kippen, während ein Pin mit sanftem Leuchten am Fuß aus ihrer Mitte aufsteigt; beim Verlassen kehrt alles zurück: sanft, ohne Nachfedern.
Lass den Platz der Karte im Layout unverändert und zeige denselben Effekt beim Tastaturfokus.
ABCDEF
Zeiger hier bewegen
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.