Text Reveal

Les mots apparaissent en fondu les uns après les autres au chargement de la page, souvent avec un flou qui se dissipe, comme s’ils étaient générés.

Ajoute un effet « Text Generate » sur [où].
Les mots doivent apparaître en fondu les uns après les autres pendant qu’un léger flou se dissipe sur chacun, comme si le texte était en train d’être généré : régulier et calme.
Joue-le une seule fois au chargement, laisse les lecteurs d’écran lire tout le texte immédiatement et affiche-le sans mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Le texte reste épinglé pendant que ses lignes apparaissent et disparaissent en fondu selon la progression du défilement.

Ajoute un effet « Sticky Text Fade » (aussi appelé sticky scroll text opacity fade) sur [où].
Pendant le défilement de la section, le bloc de texte doit rester épinglé en place et ses lignes doivent apparaître et disparaître en fondu une à une selon la progression du défilement.
Lie les fondus directement à la position de défilement pour qu’ils s’inversent en remontant, et garde chaque ligne accessible aux lecteurs d’écran, quelle que soit son opacité.

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 lettres d’un titre se mélangent ou bougent l’une après l’autre à mesure que l’utilisateur fait défiler les sections.

Ajoute « Scrolling Letters » (aussi appelé on-scroll letter animations) sur [où].
À mesure que l’utilisateur fait défiler les sections, les lettres du titre doivent rouler vers leur caractère suivant l’une après l’autre de gauche à droite, liées directement à la position de défilement.
En remontant, elles doivent revenir en arrière, et les lecteurs d’écran doivent recevoir le titre actuel comme du texte normal.

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.

Le texte est remplacé par des caractères aléatoires qui changent et se résolvent peu à peu en mot final.

Ajoute un effet de survol « Text Scramble » (aussi appelé text decode ou encrypted text) sur [où].
Quand le pointeur passe sur le texte, chaque lettre doit défiler rapidement parmi des caractères aléatoires puis se fixer sur sa vraie lettre, l’une après l’autre, de gauche à droite.
Évite que la largeur du texte saute pendant le brouillage, fais lire le vrai texte aux lecteurs d’écran et affiche le même effet au focus clavier.

Le texte pivote en perspective 3D en suivant la position de la souris.

Ajoute un effet « Text Tilt » (aussi appelé perspective text tilt) sur [où].
Le texte doit s’incliner doucement en 3D vers le pointeur quand il bouge, en le suivant avec fluidité, puis revenir à plat en douceur quand le pointeur s’en va.
Garde une inclinaison discrète pour que le texte reste lisible, et laisse-le à plat sur les écrans tactiles et si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).