Card Hover Effect
Auch genannt Sliding highlight card grid
Ein hervorgehobener Hintergrund gleitet in einem Raster zwischen den Karten und folgt der jeweils gehoverten Karte.
Einsatz
Kartenraster, Feature-Listen
Varianten
- Card Hover Effect
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 „Card Hover Effect“ hinzu (auch sliding highlight card grid genannt).
Ein weicher, hervorgehobener Hintergrund soll hinter der gehoverten Karte erscheinen, fließend zur nächsten Karte gleiten, auf die der Zeiger wechselt, und ausblenden, wenn der Zeiger das Raster verlässt.
Lass den Tastaturfokus die Hervorhebung genauso bewegen und halte die Karten selbst an ihrem Platz.Ähnliche Animationen
ABC
Klicken
Tab Indicator Slide
Auch genannt Sliding underline, Active tab indicator, Segmented control pill
Eine Unterstreichung oder Pille gleitet vom alten Tab zum neu ausgewählten Tab.
Einsatz
Tab-Leisten, Segmented Controls
Füge bei [wo] einen „Tab Indicator Slide“ hinzu (auch sliding underline oder active tab indicator genannt).
Wird ein neuer Tab gewählt, soll die Unterstreichung vom alten zum neuen Tab gleiten, schnell und sanft abbremsend, und sich an die Breite des neuen Tabs anpassen, falls sie abweicht.
Behalte eine korrekte Tab-Semantik mit Navigation per Pfeiltasten bei und setze den Indikator bei reduzierter Bewegung (prefers-reduced-motion) ohne Gleiten um.ACB
Klicken
Shared Layout Animation
Auch genannt layoutId, Shared element (in-page)
Ein Element scheint sich in ein passendes Element an neuer Stelle zu bewegen und seine Größe anzupassen, als wäre es dasselbe.
Einsatz
Auswahl-Hervorhebung, Vorschaubild zur vergrößerten Ansicht
Füge bei [wo] eine „Shared Layout Animation“ hinzu (auch In-Page Shared Element genannt).
Wenn sich die Auswahl ändert, soll das Element sanft von seiner alten Position an die neue gleiten und dabei seine Größe anpassen, weich einrastend, sodass es als ein Objekt wirkt statt als zwei.
Zeige immer nur eine Kopie und verhindere, dass das umgebende Layout während der Bewegung springt.ABC
Zeiger hier bewegen
Focus Cards
Auch genannt Blur siblings on hover, Hover focus blur, Card hover effect
Benachbarte Karten werden unscharf und abgedunkelt, während die gehoverte Karte scharf bleibt.
Einsatz
Kartenraster, Galerien
Füge bei [wo] einen „Focus Cards“-Effekt hinzu (auch blur siblings on hover, hover focus blur oder card hover effect genannt).
Solange der Zeiger über einer Karte ist, sollen die anderen Karten unscharf, dunkler und etwas kleiner werden, während die gehoverte Karte scharf bleibt, alles mit einem weichen Übergang, der sich beim Verlassen umkehrt.
Wende denselben Fokus beim Tastaturfokus an und halte alle Karten scharf und lesbar, wenn nichts gehovert wird.A
Zeiger hier bewegen
Card Spotlight
Auch genannt Spotlight hover, Pointer glow, Mouse-following glow, Radial gradient hover
Ein weiches radiales Licht folgt dem Zeiger über die Kartenoberfläche und lässt den Hintergrund darunter durchscheinen.
Einsatz
Feature-Karten, Bento-Raster
Füge bei [wo] einen „Card Spotlight“-Effekt hinzu (auch spotlight hover, pointer glow, mouse-following glow oder radial gradient hover genannt).
Ein weicher, schwacher radialer Schein soll dem Zeiger über die Kartenoberfläche folgen, beim Hineinfahren einblenden und beim Verlassen ausblenden.
Halte den Schein hinter dem Karteninhalt, damit der Text lesbar bleibt, und lass die Karte auf Touch-Geräten einfach unbeleuchtet.Mehr aus Hover
A
Mit der Maus darüberfahren
Curl
Auch genannt Page curl
Eine Ecke des Elements klappt beim Hovern hoch wie eine Seite, die umgeblättert wird.
Einsatz
Karten, Notizen
Füge bei [wo] einen „Curl“-Hover-Effekt hinzu (auch page curl genannt).
Eine Ecke des Elements soll sich weich hochklappen wie eine Seite beim Umblättern, dabei die Rückseite der Falte zeigen und beim Verlassen wieder flach werden.
Halte die Falte klein, damit sie keine wichtigen Inhalte verdeckt, und zeige denselben Effekt beim Tastaturfokus.A
B
Zeiger hier bewegen
Direction Aware Hover
Auch genannt Direction-aware overlay
Ein Overlay gleitet von der Seite herein, über die der Zeiger kam, und verschwindet zur Seite, über die er geht.
Einsatz
Bildergalerien, Portfolio-Raster
Füge bei [wo] einen „Direction Aware Hover“-Effekt hinzu (auch direction-aware overlay genannt).
Ein Overlay soll von der Seite hereingleiten, über die der Zeiger kam, und zu der Seite hinausgleiten, über die er das Element verlässt: schnell und weich.
Ermittle die Seite aus der Zeigerposition beim Betreten und Verlassen und nutze bei Touch oder Tastaturfokus eine feste Standardrichtung.