Split Text Stagger

Les éléments d’un groupe s’animent l’un après l’autre avec un léger décalage, formant une vague au lieu d’apparaître tous en même temps.

Ajoute une animation « Stagger » (aussi appelée staggered animation ou cascade) sur [où].
Les éléments doivent apparaître en montant l’un après l’autre avec un décalage court et régulier, pour que le groupe forme une vague rapide plutôt que d’apparaître d’un coup.
Garde la séquence courte même pour de longues listes, joue-la une seule fois à l’entrée à l’écran et supprime le mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

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 glisse vers le haut depuis derrière une ligne de découpe, comme s’il surgissait de nulle part.

Ajoute une entrée de texte « Mask Reveal » (aussi appelée line mask reveal ou text masking) sur [où].
Chaque ligne doit glisser vers le haut depuis derrière un bord invisible, comme si elle surgissait de nulle part, l’une après l’autre, rapide et fluide, sans rebond.
Joue-la une seule fois quand le texte entre à l’écran au défilement, et affiche le texte tout de suite, sans mouvement, si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les lettres montent et descendent en séquence, créant une vague qui parcourt le mot.

Ajoute un effet « Wavy Text » (aussi appelé text wave) sur [où].
Les lettres doivent monter et descendre l’une après l’autre pour qu’une vague douce et fluide parcoure le mot en continu.
Fais une boucle sans coupure, fais-le lire comme un seul mot par les lecteurs d’écran et arrête la vague si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les caractères défilent comme sur un tableau des départs d’aéroport jusqu’à s’arrêter sur la lettre voulue.

Ajoute un afficheur à palettes (Split-Flap Text) sur [où] : aussi appelé text flipping board ou flip board.
Chaque case de caractère doit défiler rapidement dans l’alphabet jusqu’à s’arrêter sur sa lettre cible, les cases se fixant l’une après l’autre de gauche à droite.
Lance-le une fois à chaque fois que le texte apparaît ou change, n’annonce que le texte final aux lecteurs d’écran, et affiche le texte final sans défilement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les contours des lettres ondulent comme dessinés à la main, grâce à un filtre de déplacement SVG.

Ajoute un effet « Squiggly Text » (aussi appelé wobbly text ou turbulence text) sur [où].
Les contours des lettres doivent trembler légèrement comme s’ils étaient dessinés à la main et redessinés plusieurs fois par seconde : un frémissement discret et saccadé plutôt qu’une onde fluide.
Garde le texte lisible et laisse-le immobile 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é.