Pointer Highlight
Une flèche de pointeur trace un cadre de mise en valeur autour d’un mot quand le texte apparaît au défilement.
Usages
Titres, textes marketing
Variantes
- Pointer Highlight
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 « Pointer Highlight » sur [où].
Quand le texte apparaît au défilement, un cadre doit se tracer autour du mot clé de gauche à droite pendant qu’une petite flèche de pointeur longe son coin, de façon fluide et régulière, comme si quelqu’un entourait le mot à la main.
Ne le trace qu’à la première apparition, sans décaler le texte, et affiche directement le cadre terminé si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).Animations similaires
ABC DEFG HIJ KL
Text Highlighter (effet surligneur)
Aussi appelée Highlight Marker, Marker Underline, Hero Highlight
Une bande de couleur façon surligneur se trace sur une expression pour la mettre en valeur.
Usages
Mise en valeur d’expressions clés
Ajoute un effet surligneur (Text Highlighter) sur [où], aussi appelé highlight marker ou marker underline.
Une bande de couleur façon surligneur doit glisser en douceur derrière l’expression clé, de gauche à droite, comme si quelqu’un la surlignait au feutre.
Joue-le une seule fois quand l’expression entre à l’écran au défilement, garde le texte lisible sur la bande et fais suivre correctement la bande quand l’expression passe sur deux lignes.ABC DEF
Survolez la démo
Underline Draw (soulignement animé)
Aussi appelée Animated Underline, Hover Underline Animation, Underline Stretch, Underline Grow, Underline Slide, Underline From Left
Au survol, un soulignement s’étend sous un lien depuis un côté ou depuis le centre.
Usages
Liens de navigation, liens dans le texte
Ajoute un effet de survol soulignement animé (Underline Draw) sur [où], aussi appelé animated underline ou hover underline animation.
Quand le pointeur survole le lien, un soulignement doit s’étendre en douceur de gauche à droite sous le texte, puis se rétracter quand le pointeur s’en va : rapide et discret.
Évite que le soulignement décale la mise en page autour et affiche le même effet au focus clavier.Line Drawing
Aussi appelée Path Drawing, Stroke Dash Animation, Self-Drawing SVG, DrawSVG, Line Draw, SVG Path Draw, Stroke draw, Checkmark draw
Un tracé SVG semble se dessiner le long de son chemin grâce à l’animation du décalage des tirets.
Usages
Icônes, logos et illustrations
Ajoute une animation « Line Drawing » (aussi appelée path drawing ou self-drawing SVG) sur [où].
Chaque trait doit sembler se dessiner tout seul, en douceur, le long de son chemin du début à la fin, et un second trait, comme une coche, suit juste après le premier.
Joue-la une seule fois à l’entrée à l’écran plutôt qu’en boucle, et affiche les lignes entièrement tracées si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).Autres animations : Micro-interaction
A
Cliquez
Press (Button Tap Scale)
Aussi appelée Tap feedback, Active scale, Press state
L’élément rétrécit légèrement pendant l’appui et revient avec un ressort au relâchement.
Usages
Boutons, cartes
Ajoute un effet « Press (Button Tap Scale) » (aussi appelé tap feedback ou press state) sur [où].
Pendant l’appui, l’élément doit rétrécir légèrement et s’assombrir un peu, puis reprendre sa taille avec un petit rebond au relâchement : rapide et discret.
Affiche le même retour au clavier et au toucher, et empêche la mise en page autour de bouger.Faites glisser
Pull to Refresh (tirer pour actualiser)
Aussi appelée Swipe to refresh
Tirer une liste vers le bas fait apparaître un indicateur de chargement et recharge le contenu au relâchement.
Usages
Fils d’actualité, boîtes de réception
Ajoute une interaction tirer pour actualiser (Pull to Refresh) (aussi appelée swipe to refresh) sur [où].
Quand on tire la liste vers le bas depuis le haut, elle doit suivre le doigt avec un peu de résistance et révéler un indicateur de chargement qui tourne pendant la traction ; au relâchement, il continue de tourner pendant le rechargement, puis la liste remonte en douceur.
Ne la déclenche que lorsque la liste est déjà tout en haut, et propose aussi un bouton d’actualisation classique aux utilisateurs du clavier et des lecteurs d’écran.Cliquez
Ripple
Aussi appelée Material ripple, Touch ripple, Ripple Button, Ink ripple
Une onde circulaire s’étend et s’estompe depuis le point exact du clic ou du toucher.
Usages
Boutons, éléments de liste
Ajoute un effet « Ripple » (aussi appelé material ripple ou ink ripple) sur [où].
À chaque clic ou toucher, une onde circulaire douce doit se propager depuis le point exact de l’appui jusqu’à couvrir l’élément, en s’estompant à mesure qu’elle grandit : rapide et légère.
Rogne l’onde à la forme de l’élément, laisse chaque appui rapide lancer sa propre onde, et fais-la partir du centre pour les appuis au clavier.