Text Path Scroll

Un élément parcourt un chemin courbe personnalisé et peut pivoter pour le suivre.

Ajoute une animation « Motion Path » (aussi appelée animate along path) sur [où].
Un petit élément doit parcourir un itinéraire courbe personnalisé à un rythme lent et régulier, en pivotant pour faire face à sa direction de déplacement.
Utilise un itinéraire fermé pour que la boucle se répète sans saut, et fais en sorte que l’itinéraire s’adapte à son conteneur au lieu de garder une taille fixe.

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

De grandes lignes de texte glissent horizontalement pendant que la page défile verticalement.

Ajoute un « Text Marquee on Scroll » (aussi appelé scroll text marquee ou scroll velocity text) sur [où].
De grandes lignes de texte doivent glisser latéralement quand la page défile vers le bas, une ligne sur deux dans le sens opposé, puis revenir quand on remonte.
Lie le mouvement à la position de défilement, empêche les longues lignes de créer une barre de défilement horizontale, et garde-les immobiles si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

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.

Les mots d’un paragraphe passent de pâles à pleinement opaques au fil du défilement.

Ajoute un effet « Text Reveal » (aussi appelé scroll text reveal ou word-by-word reveal) sur [où].
Le paragraphe doit commencer pâle, puis chaque mot doit s’éclaircir jusqu’à sa pleine intensité l’un après l’autre au fil du défilement, en suivant la position de défilement.
En remontant, les mots doivent pâlir à nouveau, et tout le paragraphe doit rester accessible aux lecteurs d’écran, quelle que soit son atténuation.