Pular para o conteúdo
PT

13 ícones · interaction="hover-loop"

Ícones animados em loop no hover

Estes ícones ficam em loop enquanto o ponteiro está sobre eles e terminam o ciclo atual depois que ele sai, então nunca param no meio do movimento. Funcionam bem em links que convidam a olhar com mais calma, principalmente ícones de redes sociais e de comunidades.

Todos os ícones com a interação “Loop no hover”

Como funciona

Fica em loop durante o hover, termina o ciclo atual depois do mouseleave e fica estático quando o usuário prefere movimento reduzido.

Com movimento reduzido, o ícone fica estático durante o hover. Toques em telas sensíveis ao toque não iniciam animações de hover; já o foco pelo teclado inicia, quando o ícone está dentro de um elemento focável. O componente React cuida de tudo isso; você só escolhe o ícone.

Onde usar

  • Links de redes sociais no cabeçalho e no rodapé
  • Botões de convite para comunidades e chats
  • Links de portfólio e de perfil
  • Seletores de idioma e região

Por categoria

Use no React

Os ícones listados aqui usam esta interação por padrão. Qualquer outro ícone também pode usá-la: basta passar a prop interaction.

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

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

Use a render prop para que o link inteiro dispare o loop, inclusive com foco pelo teclado. Ajuste o ritmo com 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 as props estão na documentação. Fora do React, os ícones são arquivos Lottie JSON; a página Ícones Lottie mostra como recriar as interações com lottie-web.

Perguntas frequentes

Quais ícones usam a interação “Loop no hover”?

13 ícones: Flag, Cloud, Globe, Behance, Codepen, Discord, Dribbble, Facebook, Github, Linkedin, Pocket, Telegram e Twitter. Ícones em loop no hover costumam marcar links de redes sociais, convites para comunidades, links de portfólio e seletores de idioma.

O que acontece quando o usuário prefere movimento reduzido?

Com movimento reduzido, o ícone fica estático durante o hover. O componente React lê prefers-reduced-motion e se atualiza quando a configuração muda, então você não precisa escrever nenhum código para isso.

Como mudo a interação de um ícone?

Cada ícone executa a interação para a qual foi desenhado. Passe interaction="hover-loop" para dar esse comportamento a qualquer outro ícone, ou outro valor ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') para trocá-la. As props autoplay, loop e speed ajustam a reprodução.