Shimmer Text

Au survol, une bande de lumière diagonale balaie l’élément d’un côté à l’autre.

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).

Un texte rempli d’un dégradé dont les couleurs changent ou s’écoulent en continu.

Ajoute un effet « Animated Gradient Text » (aussi appelé aurora text ou rainbow text sweep) sur [où].
Les lettres doivent être remplies d’un dégradé dont les couleurs s’écoulent lentement et en douceur sur le texte, en boucle infinie et sans coupure.
Garde le texte lisible sur son fond à tout instant, et fige les couleurs si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un reflet lumineux balaie des formes grises de remplacement.

Ajoute un « Skeleton Shimmer » (aussi appelé skeleton wave ou shimmer effect) sur [où].
Une bande de lumière douce doit balayer les formes grises de gauche à droite et marquer une courte pause avant le passage suivant : fluide et sans hâte.
Calque les formes sur la mise en page réelle pour que rien ne saute au chargement du contenu, et affiche des blocs statiques si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

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.

Un titre est découpé en tranches horizontales qui glissent latéralement les unes contre les autres au défilement.

Ajoute un effet « Sliced Text » (aussi appelé on-scroll sliced text) sur [où].
Un grand titre doit être découpé en tranches horizontales qui glissent latéralement les unes contre les autres au défilement, alignées en un mot complet au départ.
Lie le décalage directement à la position de défilement pour qu’il s’inverse en remontant, et garde le titre comme un seul texte lisible pour les lecteurs d’écran.

Le texte est disposé autour d’un cercle qui tourne en continu.

Ajoute « Spinning Text » (aussi appelé circular text ou text on circle) sur [où].
Les lettres doivent être réparties uniformément autour d’un cercle qui tourne lentement et régulièrement, sans saut quand la boucle recommence.
Donne le texte une seule fois aux lecteurs d’écran comme du texte normal, et arrête la rotation si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un titre est découpé en caractères, mots ou lignes qui s’animent l’un après l’autre avec un léger décalage.

Ajoute une entrée « Split Text Stagger » (aussi appelée letter stagger ou staggered text reveal) sur [où].
Découpe le titre en lettres qui montent et apparaissent en fondu l’une après l’autre avec un court délai entre elles, rapide et fluide, sans rebond.
Joue-la une seule fois quand le titre apparaît à l’écran, fais en sorte que les lecteurs d’écran le lisent comme un seul mot, et affiche-le sans mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).