Saltar al contenido
ES

13 iconos · interaction="hover-loop"

Iconos animados en bucle con hover

Estos iconos se repiten en bucle mientras el puntero está sobre ellos y terminan el ciclo en curso cuando sale, así que nunca se detienen a mitad del movimiento. Funcionan bien en enlaces que invitan a mirar con calma, sobre todo iconos sociales y de comunidad.

Todos los iconos con la interacción “Bucle con hover”

Cómo se comporta

Se repite en bucle durante el hover, termina el ciclo en curso tras mouseleave y se queda estático si se prefiere movimiento reducido.

Si se prefiere movimiento reducido, el icono se queda estático durante el hover. En pantallas táctiles, un toque no inicia las animaciones de hover; el foco del teclado sí, cuando el icono está dentro de un elemento enfocable. El componente de React se encarga de todo esto; tú solo eliges el icono.

Dónde usarlos

  • Enlaces a redes sociales en cabeceras y pies de página
  • Botones de invitación a comunidades y chats
  • Enlaces a portafolios y perfiles
  • Selectores de idioma y de región

Por categoría

Úsalo en React

Los iconos de esta lista usan esta interacción por defecto, pero cualquier otro icono también puede usarla: pasa la prop interaction.

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

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

Usa la render prop para que todo el enlace active el bucle, también con el foco del teclado. Cambia el ritmo con 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>
  )}
/>

Todas las props están en la documentación. Fuera de React, los iconos son archivos Lottie JSON; en Iconos Lottie verás cómo recrear las interacciones con lottie-web.

Preguntas frecuentes

¿Qué iconos usan la interacción “Bucle con hover”?

13 iconos: Flag, Cloud, Globe, Behance, Codepen, Discord, Dribbble, Facebook, Github, Linkedin, Pocket, Telegram y Twitter. Los iconos en bucle con hover suelen marcar enlaces sociales, invitaciones a comunidades, enlaces a portafolios y selectores de idioma.

¿Qué pasa cuando el usuario prefiere movimiento reducido?

Si se prefiere movimiento reducido, el icono se queda estático durante el hover. El componente de React lee prefers-reduced-motion y se actualiza cuando cambia el ajuste, así que no necesitas escribir código para ello.

¿Cómo cambio la interacción de un icono?

Cada icono reproduce la interacción para la que fue diseñado. Pasa interaction="hover-loop" para dar este comportamiento a cualquier otro icono, u otro valor ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') para cambiarlo. Las props autoplay, loop y speed ajustan la reproducción.