Text Hover Effect

Déplacer le pointeur sur une carte dévoile un texte caché sous un bord de masque ou un projecteur.

Ajoute un effet « Text Reveal Card » (aussi appelé spotlight text reveal) sur [où].
Quand le pointeur se déplace sur la carte, un bord vertical doit le suivre de près et dévoiler un texte caché d’un côté, de façon fluide et directe, sans latence.
Sur les écrans tactiles, où il n’y a pas de pointeur à suivre, laisse un glisser ou un appui révéler le texte caché, et rends ce texte accessible aux lecteurs d’écran.

Les contours des lettres se tracent d’un trait avant que le remplissage n’apparaisse.

Ajoute un effet « Stroke Text Draw » (aussi appelé draw in text ou animated stroke text) sur [où].
Les contours des lettres doivent se tracer d’eux-mêmes en douceur, puis, une fois complets, le remplissage doit apparaître en fondu.
Joue-le une seule fois au chargement, garde le mot accessible comme du vrai texte, et affiche directement le texte rempli si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les lettres se remplissent d’un liquide qui monte en ondulant.

Ajoute un effet « Liquid Fill Text » (aussi appelé water fill text) sur [où].
Les lettres détourées doivent se remplir d’un liquide dont la surface ondulée roule latéralement pendant que le niveau monte et descend lentement, en boucle douce et continue.
Garde le mot disponible en texte réel pour les lecteurs d’écran, et fixe le liquide à un niveau immobile si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Le texte suit un tracé courbe et avance le long de celui-ci au fil du défilement.

Ajoute un effet « Text Path Scroll » (aussi appelé text path curve scroll animation) sur [où].
Le texte doit reposer sur une ligne courbe et glisser le long de celle-ci au défilement, en avançant vers le bas et en reculant vers le haut.
Lie le mouvement directement à la position de défilement, sans latence, et garde le texte lisible comme du texte normal pour les lecteurs d’écran.

Un mot est dupliqué en de nombreuses copies empilées qui se décalent au défilement.

Ajoute un effet « Text Repetition » (aussi appelé repeated text scroll) sur [où].
Un mot doit être copié en une pile de copies en contour plus pâles qui se déploient depuis l’arrière au fil du défilement, puis se replient quand on remonte.
Lie le déploiement directement à la position de défilement et masque les copies supplémentaires aux lecteurs d’écran pour que le mot ne soit lu qu’une fois.

Le texte existant sort en animation et est remplacé par un nouveau contenu.

Ajoute un effet « Text Replacement » (aussi appelé text swap) sur [où].
Quand le texte change, les anciens caractères doivent glisser vers le haut et sortir pendant que les nouveaux entrent par le bas, caractère après caractère, en une vague rapide et fluide.
Évite que la zone de texte change brusquement de taille pendant l’échange et fais annoncer seulement le nouveau texte aux lecteurs d’écran.