Aussi appelée Spotlight hover, Pointer glow, Mouse-following glow, Radial gradient hover
Une douce lumière radiale suit le pointeur sur la surface de la carte et révèle le fond en dessous.
Usages
Cartes de fonctionnalités, grilles bento
Ajoute un effet « Card Spotlight » (aussi appelé spotlight hover, pointer glow, mouse-following glow ou radial gradient hover) sur [où].
Une lueur radiale douce et légère doit suivre le pointeur sur la surface de la carte, apparaître en fondu quand il entre et s’estomper quand il sort.
Garde la lueur derrière le contenu de la carte pour que le texte reste lisible et, sur les appareils tactiles, laisse simplement la carte sans éclairage.
Aussi appelée Holographic Foil Text
Le texte affiche des reflets irisés façon feuille holographique, qui bougent avec le pointeur ou au fil du temps.
Ajoute un effet de survol « Holographic Text » (aussi appelé holographic foil text) sur [où].
Tant que le pointeur survole le texte, une bande de couleurs façon feuille holographique doit glisser lentement et en douceur d’avant en arrière sur les lettres, et le texte doit retrouver son aspect normal quand le pointeur s’en va.
Garde les lettres lisibles à chaque instant du reflet, et affiche le même effet au focus clavier.
Aussi appelée Perspective tilt, 3D card effect, Tilt card, Tilt on hover, Parallax tilt
Une carte pivote en perspective vers le pointeur, et son contenu en couches se détache de la surface.
Usages
Cartes produit et de tarifs
Ajoute un effet « 3D Tilt » (aussi appelé perspective tilt ou tilt card) sur [où].
La carte doit s’incliner en perspective vers le pointeur quand il bouge, ses couches internes se détachant de la surface à des profondeurs différentes, puis revenir à plat en douceur quand il sort : fluide et discret.
Garde une inclinaison légère pour que le texte reste lisible, et laisse la carte à plat sur les écrans tactiles et si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).
Aussi appelée Sheen, Shiny Button, Shine on Hover, Glint, Shimmer, Shimmer Button
Au survol, une bande de lumière diagonale balaie l’élément d’un côté à l’autre.
Usages
Boutons, cartes, badges
Ajoute un effet au survol « Shine Sweep » (aussi appelé sheen, shiny button, shine on hover, glint, shimmer ou shimmer button) sur [où].
Une douce bande de lumière diagonale doit balayer l’élément de gauche à droite, puis recommencer après une courte pause tant que le pointeur reste dessus.
Garde la bande rognée à l’intérieur de l’élément, arrête-la quand le pointeur sort et ne la joue pas si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).