Morphing Text
Aussi appelée Text Morph
Un mot se floute et se fond dans le suivant au même endroit.
Usages
Accroches de hero
Variantes
- blur threshold morph
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 un effet « Morphing Text » (aussi appelé text morph) sur [où].
Un mot doit se flouter et fondre dans le suivant au même endroit, avec une fusion douce et gluante, puis rester immobile un instant avant le changement suivant.
Fais défiler les mots sans coupure, laisse les lecteurs d’écran lire les mots comme du texte normal et arrête le cycle si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).Animations similaires
ABDEFGHIJKLDEFMN
Word Rotate
Aussi appelée Rotating Words, Flip Words, Container Text Flip, Layout Text Flip, Rotating Text Wheel
Un mot de la phrase est remplacé par le mot suivant d’une liste avec un glissement, une rotation ou un fondu.
Usages
Accroches hero
Ajoute un effet « Word Rotate » (aussi appelé rotating words ou flip words) sur [où].
Un mot de la ligne doit glisser vers le haut et sortir pendant que le mot suivant d’une liste entre par le bas, avec une pause sur chaque mot avant le changement suivant.
Évite que le reste de la ligne saute quand les mots n’ont pas la même largeur, ne fais pas annoncer chaque changement par les lecteurs d’écran et arrête la rotation si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).AWBXCYDZ
Text Replacement
Aussi appelée Text Swap
Le texte existant sort en animation et est remplacé par un nouveau contenu.
Usages
Libellés qui changent
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.ABCD
Blur In
Aussi appelée Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
L’élément part très flou et devient net, souvent en glissant ou en apparaissant en fondu.
Usages
Apparition de titres et de textes hero
Ajoute une animation d’entrée « Blur In » (aussi appelée text focus in, focus in ou blur text reveal) sur [où].
Le contenu doit partir très flou et transparent, puis devenir net sur place : doux et plutôt lent, sans déplacement.
Joue-la une seule fois et affiche le texte net tout de suite si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).Survolez la démo
Gooey Effect
Aussi appelée Goo Effect, Liquid Blob Merge, Metaball Effect, Gooey / Liquid Metaball, Metaballs, Liquid blobs
Les formes proches fusionnent comme des gouttes liquides grâce à un filtre de flou et de contraste.
Usages
Menus, curseurs et pagination
Ajoute un « Gooey Effect » (aussi appelé goo effect ou metaballs) sur [où].
Au survol, de petites gouttes doivent se détacher de la forme principale en s’étirant comme un liquide avant de se libérer, puis revenir et fusionner en douceur quand le pointeur s’en va.
Applique le filtre de flou et de contraste uniquement au petit groupe de formes, pas à toute la page, et montre le même effet au focus clavier et au toucher.Autres animations : Text
ABCDEF
Neon Glow Text
Aussi appelée Neon Sign Flicker, Glowing Text
Le texte brille comme un tube néon et clignote ou pulse.
Usages
Thèmes vie nocturne et gaming
Ajoute un effet « Neon Glow Text » (aussi appelé neon sign flicker ou glowing text) sur [où].
Le texte doit briller comme un tube néon, d’une lumière douce et régulière, et de temps en temps s’éteindre brièvement comme une vraie enseigne.
Garde le clignotement occasionnel plutôt que rapide, car les flashs rapides peuvent nuire à certains utilisateurs, et garde la lueur fixe si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).A
E
I
MB
F
J
NC
G
K
OD
H
L
PQ
R
S
T
Faites défiler à l’intérieur
Scrolling Letters
Aussi appelée On-Scroll Letter Animations
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.
Usages
Indicateurs de section
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.ABC DEFGH
Shimmer Text
Aussi appelée Animated Shiny Text, Metallic Shimmer Text, Gradient Text Shimmer
Un reflet lumineux balaie les lettres à plusieurs reprises.
Usages
Badges et pastilles d’annonce
Ajoute un effet « Shimmer Text » (aussi appelé animated shiny text ou metallic shimmer text) sur [où].
Une bande de lumière doit balayer les lettres en douceur de gauche à droite, puis recommencer après une courte pause.
Garde le texte lisible sous le reflet et laisse-le immobile si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).