Aller au contenu
FR

13 icônes · interaction="hover-loop"

Icônes animées en boucle au survol

Ces icônes bouclent tant que le pointeur reste dessus et terminent le cycle en cours après sa sortie : elles ne s’arrêtent jamais en plein mouvement. Elles conviennent aux liens qui invitent à s’attarder, surtout les icônes de réseaux sociaux et de communautés.

Toutes les icônes « boucle au survol »

Comportement

Boucle pendant le survol, termine le cycle en cours après mouseleave et reste fixe quand la réduction des animations est activée.

Si la réduction des animations est activée, l’icône reste fixe pendant le survol. Sur écran tactile, un tap ne déclenche pas les animations au survol ; le focus clavier, lui, les déclenche quand l’icône se trouve dans un élément focusable. Le composant React gère tout cela : vous n’avez qu’à choisir l’icône.

Où l’utiliser

  • Liens vers les réseaux sociaux dans l’en-tête et le footer
  • Boutons d’invitation à une communauté ou à un chat
  • Liens vers un portfolio ou un profil
  • Sélecteurs de langue et de région

Par catégorie

Utilisation dans React

Les icônes listées ici jouent cette interaction par défaut. Toute autre icône peut aussi l’utiliser : passez-lui la prop interaction.

import UseAnimations from 'react-useanimations';
import settings from 'react-useanimations/lib/settings';

// Settings utilise normalement 'hover'
<UseAnimations animation={settings} interaction="hover-loop" size={32} />

Utilisez la render prop pour que tout le lien déclenche la boucle, focus clavier compris. Changez le rythme avec speed :

import github from 'react-useanimations/lib/github';

<UseAnimations
  animation={github}
  speed={1.5}
  render={(eventProps, animationProps) => (
    <a href="https://github.com/useAnimations" aria-label="GitHub" {...eventProps}>
      <span {...animationProps} />
    </a>
  )}
/>

Toutes les props sont décrites dans la documentation. En dehors de React, les icônes sont des fichiers Lottie JSON ; la page Icônes Lottie montre comment recréer les interactions avec lottie-web.

Questions fréquentes

Quelles icônes utilisent l’interaction « boucle au survol » ?

13 icônes : Flag, Cloud, Globe, Behance, Codepen, Discord, Dribbble, Facebook, Github, Linkedin, Pocket, Telegram et Twitter. Les icônes en boucle au survol signalent typiquement les liens sociaux, les invitations à une communauté, les liens de portfolio et les sélecteurs de langue.

Que se passe-t-il quand l’utilisateur a activé la réduction des animations ?

Si la réduction des animations est activée, l’icône reste fixe pendant le survol. Le composant React lit prefers-reduced-motion et se met à jour quand le réglage change : vous n’avez aucun code à écrire pour cela.

Comment changer l’interaction d’une icône ?

Chaque icône joue l’interaction pour laquelle elle a été conçue. Passez interaction="hover-loop" pour donner ce comportement à n’importe quelle autre icône, ou une autre valeur ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') pour en changer. Les props autoplay, loop et speed règlent la lecture.