Sticky Text Fade

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.

Un élément reste fixé sur place pendant une portion du défilement tandis que le reste du contenu ou l’animation progresse.

Ajoute un effet de défilement « Pinning » (aussi appelé pinned section ou sticky section) sur [où].
Un panneau doit rester fixé sur place pendant que le contenu à côté défile, en changeant selon l’étape en cours de lecture, puis se libérer à la fin de la section.
Préfère le positionnement sticky natif plutôt que de détourner le défilement, et assure-toi que chaque étape reste lisible sans le panneau épinglé sur petit écran.

La progression de l’animation est liée directement à la position de défilement : défiler vers l’avant ou l’arrière la joue ou la rembobine.

Ajoute une « Scroll-Linked Animation » (aussi appelée scroll-driven animation ou scroll scrub) sur [où].
L’animation doit suivre exactement la position de défilement : descendre la fait avancer, remonter la rembobine aussitôt, sans easing temporel propre.
Associe toute l’animation à une plage de défilement claire, et affiche un état statique cohérent si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

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 ou les mots pivotent en 3D autour d’un axe pour révéler le texte suivant sur leur face arrière.

Ajoute un effet de survol « Text 3D Flip » (aussi appelé 3D flip text reveal) sur [où].
Quand le pointeur est sur le texte, chaque lettre doit basculer en 3D sur son axe horizontal pour montrer une nouvelle lettre sur son autre face, l’une après l’autre dans un balayage rapide et fluide, puis revenir quand le pointeur s’en va.
Garde la même taille de boîte de texte pendant la bascule et montre le même effet au focus clavier.

Le texte se déforme et ondule de façon organique, piloté par le défilement ou le mouvement du pointeur.

Ajoute un effet « Text Distortion » (aussi appelé organic text distortion) sur [où].
Une ligne de texte doit défiler latéralement sans fin et se déformer et onduler de façon organique en bougeant, comme vue à travers de l’eau en mouvement, le flux étant piloté par le défilement de l’utilisateur.
Garde la distorsion assez légère pour que le texte reste lisible, assure-toi qu’elle reste fluide sur les appareils plus lents, et désactive-la si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).