Přejít na obsah
CS

13 ikon · interaction="hover-loop"

Animované ikony se smyčkou při hoveru

Tyto ikony běží ve smyčce, dokud na nich zůstává kurzor, a po jeho odjetí dokončí rozběhnutý cyklus, takže se nikdy nezastaví uprostřed pohybu. Hodí se pro odkazy, které zvou k delšímu pohledu, hlavně ikony sociálních sítí a komunit.

Všechny ikony s interakcí „smyčka při hoveru“

Jak se chová

Při hoveru běží ve smyčce, po odjetí myši (mouseleave) dokončí aktuální cyklus a při preferenci omezeného pohybu zůstane statická.

Když uživatel preferuje omezený pohyb, ikona při hoveru zůstane statická. Klepnutí na dotykové obrazovce hover animace nespouští, fokus z klávesnice ano, pokud je ikona uvnitř fokusovatelného prvku. O to všechno se postará React komponenta, vy jen vyberete ikonu.

Kde ji použít

  • Odkazy na sociální sítě v hlavičce a patičce
  • Pozvánky do komunit a chatů
  • Odkazy na portfolio a profil
  • Výběr jazyka a regionu

Podle kategorie

Použití v Reactu

Ikony v tomto seznamu přehrávají tuto interakci ve výchozím nastavení. Použít ji může i kterákoli jiná ikona: stačí jí předat prop interaction.

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

// Settings jinak používá 'hover'
<UseAnimations animation={settings} interaction="hover-loop" size={32} />

Použijte render prop, aby smyčku spouštěl celý odkaz, včetně fokusu z klávesnice. Tempo změníte pomocí 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>
  )}
/>

Všechny props najdete v dokumentaci. Mimo React jsou ikony Lottie JSON soubory; jak interakce vytvořit s lottie-web, ukazuje stránka Lottie ikony.

Časté dotazy

Které ikony používají interakci „smyčka při hoveru“?

13 ikon: Flag, Cloud, Globe, Behance, Codepen, Discord, Dribbble, Facebook, Github, Linkedin, Pocket, Telegram a Twitter. Ikony se smyčkou při hoveru obvykle označují odkazy na sociální sítě, pozvánky do komunit, odkazy na portfolio a výběr jazyka.

Co se stane, když uživatel preferuje omezený pohyb?

Když uživatel preferuje omezený pohyb, ikona při hoveru zůstane statická. React komponenta čte prefers-reduced-motion a reaguje i na změnu nastavení, takže pro to nemusíte psát žádný kód.

Jak změnit interakci ikony?

Každá ikona přehrává interakci, pro kterou byla navržena. S interaction="hover-loop" získá toto chování kterákoli jiná ikona, jinou hodnotou ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') ho změníte. Přehrávání dál upravují props autoplay, loop a speed.