21 ikon · interaction="hover"

Animované ikony reagující na hover

Tyto ikony se při najetí myší přehrají dopředu a při odjetí pozpátku, takže pohyb sleduje kurzor a nikdy neskončí v půlce. Hodí se pro položky navigace a tlačítka, která naznačují, co otevírají: koši se nadzvedne víko, ozubené kolo nastavení se pootočí, složka se otevře.

Všechny ikony s interakcí „hover“

Jak se chová

Při najetí myší (mouseenter) se přehraje dopředu, při odjetí (mouseleave) pozpátku.

Když uživatel preferuje omezený pohyb, najetí myší animaci nespustí. 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

Položky postranního panelu a navigačního menu
Tlačítka smazat, která nadzvednou víko ještě před kliknutím
Odkazy na nastavení a profil
Ovládání přiblížení a oddálení
Odkazy na sociální sítě v patičce

Podle kategorie

Akce · 11
Calendar, Edit, Explore, Folder, Home, Info, Settings, Trash, Trash V2, Zoom In, Zoom Out
Obsah · 7
Archive, Copy, Mail, Share, User minus, User plus, User X
Sociální sítě · 3
Instagram, YouTube, YouTube V2

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 bookmark from 'react-useanimations/lib/bookmark';

// Bookmark jinak používá 'click-toggle'
<UseAnimations animation={bookmark} interaction="hover" size={32} />

Pomocí render prop vložte ikonu do odkazu nebo tlačítka: animace se pak přehraje i při fokusu z klávesnice a klepnutí na dotykové obrazovce ji nespustí.

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

<UseAnimations
  animation={archive}
  render={(eventProps, animationProps) => (
    <a href="/archive" {...eventProps}>
      <span {...animationProps} /> Archiv
    </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 „hover“?

21 ikon: Calendar, Edit, Explore, Folder, Home, Info, Settings, Trash, Trash V2, Zoom In, Zoom Out, Archive, Copy, Mail, Share a 6 dalších. Ikony reagující na hover obvykle označují položky navigace, tlačítka smazat, nastavení, ovládání přiblížení a odkazy na sociální sítě.

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

Když uživatel preferuje omezený pohyb, najetí myší animaci nespustí. 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" 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.