Spinning Text
Aussi appelée Circular Text, Text on Circle
Le texte est disposé autour d’un cercle qui tourne en continu.
Usages
Badges rotatifs et tampons
Variantes
- clockwise
- counter-clockwise
Prompt
Remplacez [où] par la partie de votre page, puis collez le prompt dans votre agent IA. Chaque prompt contient le nom de l’animation : la prochaine fois, il vous suffira de la demander par son nom.
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).Animations similaires
Spin
Aussi appelée Rotate Loop, Spinner
L’élément tourne en continu à vitesse constante.
Usages
Indicateurs de chargement (spinners)
Ajoute un effet « Spin » (aussi appelé spinner ou rotate loop) sur [où].
L’élément doit tourner en continu à une vitesse constante et régulière, sans easing entre les tours.
Rends la boucle continue, donne au spinner un libellé de chargement accessible, et ralentis-le ou arrête-le si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).A
Orbiting Circles
Aussi appelée Orbit Animation, Orbit, Orbiting icons
De petits cercles ou icônes tournent autour d’un centre sur des orbites circulaires.
Usages
Schémas d’intégrations
Ajoute des « Orbiting Circles » (aussi appelés orbit animation ou orbiting icons) sur [où].
De petits cercles doivent tourner lentement et régulièrement autour d’un élément central sur des anneaux circulaires, l’anneau extérieur tournant dans l’autre sens et plus lentement.
Garde la boucle continue et les éléments en orbite bien droits, et arrête la rotation si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).Faites défiler à l’intérieur
Text Path Scroll
Aussi appelée Text Path Curve Scroll Animation
Le texte suit un tracé courbe et avance le long de celui-ci au fil du défilement.
Usages
Sections narratives
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.Autres animations : Text
ABCDEF
Split Text Stagger
Aussi appelée Letter Stagger, Staggered Text Reveal, SplitText, Splitting.js text
Un titre est découpé en caractères, mots ou lignes qui s’animent l’un après l’autre avec un léger décalage.
Usages
Titres principaux et titres de section
Ajoute une entrée « Split Text Stagger » (aussi appelée letter stagger ou staggered text reveal) sur [où].
Découpe le titre en lettres qui montent et apparaissent en fondu l’une après l’autre avec un court délai entre elles, rapide et fluide, sans rebond.
Joue-la une seule fois quand le titre apparaît à l’écran, fais en sorte que les lecteurs d’écran le lisent comme un seul mot, et affiche-le sans mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).H
G
F
E
D
C
BK
J
I
H
G
F
EN
M
L
K
J
I
HQ
P
O
N
M
L
KT
S
R
Q
P
O
N
Split-Flap Text (afficheur à palettes)
Aussi appelée Text Flipping Board, Flip Board, Vestaboard display
Les caractères défilent comme sur un tableau des départs d’aéroport jusqu’à s’arrêter sur la lettre voulue.
Usages
Tableaux d’état et affichages rétro
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).ABCDEF
Squiggly Text
Aussi appelée Wobbly Text, Turbulence Text
Les contours des lettres ondulent comme dessinés à la main, grâce à un filtre de déplacement SVG.
Usages
Titres esquissés ou ludiques
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).