6 interakcí · 300 ikon

Interakce animovaných ikon

Každá ikona má mikrointerakci, pro kterou byla navržena: běží ve smyčce, kliknutím se přepne nebo přehraje znovu, případně se přehraje při najetí myší. React komponenta interakci sama zapojí a respektuje omezený pohyb, a prop interaction kterékoli ikoně nastaví jinou.

interaction="loop"Animované ikony ve smyčce21 ikonPřehrává se nepřetržitě; když uživatel preferuje omezený pohyb, zůstane na statickém prvním snímku.Ikony ve smyčce obvykle slouží jako spinnery načítání, aktivní upozornění, zvonící zvonek nebo nápověda k posunu dolů.
interaction="click-toggle"Animované ikony přepínané kliknutím37 ikonKliknutím se přepíná mezi dvěma stavy; když uživatel preferuje omezený pohyb, přepne se okamžitě.Ikony přepínané kliknutím obvykle ovládají ztlumení, zobrazení a skrytí hesla, otevření a zavření menu, přehrávání a pauzu nebo tlačítka To se mi líbí.
interaction="click-replay"Animované ikony na kliknutí64 ikonPři každém kliknutí se jednou přehraje od začátku, pokud uživatel nepreferuje omezený pohyb.Ikony na kliknutí obvykle potvrzují odeslání, uložení, obnovení, stažení, přidání do košíku a formátování textu.
interaction="hover"Animované ikony reagující na hover21 ikonPři najetí myší (mouseenter) se přehraje dopředu, při odjetí (mouseleave) pozpátku.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ě.
interaction="hover-replay"Animované ikony s přehráním při hoveru144 ikonPři najetí myší (mouseenter) se jednou přehraje, pokud uživatel nepreferuje omezený pohyb. Odjetí myši ji nezastaví a nové najetí během přehrávání ji nespustí znovu.Ikony s přehráním při hoveru obvykle oživí odkazy se šipkou, seznamy funkcí, tlačítka panelů nástrojů a karty na landing page.
interaction="hover-loop"Animované ikony se smyčkou při hoveru13 ikonPř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á.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.

Jak vybrat interakci

Stav, který trvá, třeba načítání nebo aktivní upozornění: smyčka.
Ovládání zapnuto/vypnuto, třeba ztlumení, menu nebo zobrazení hesla: přepínání kliknutím, pro řízený stav s active.
Jednorázová akce, třeba odeslání, uložení nebo obnovení: přehrání kliknutím.
Náznak toho, co odkaz otevře: hover, který se po odjetí kurzoru přehraje zpět.
Panely nástrojů a seznamy, přes které se rychle přejíždí: přehrání při hoveru, které doběhne samo.
Odkazy, které zvou k delšímu pohledu, třeba ikony sociálních sítí: smyčka při hoveru.

Omezený pohyb

React komponenta se řídí nastavením prefers-reduced-motion a reaguje i na jeho změnu. Klepnutí na dotykové obrazovce hover animace nikdy nespustí.

loop: ikona se automaticky nespustí a zůstane na statickém prvním snímku.
click-toggle: kliknutí přepne do druhého stavu okamžitě, bez animace mezi nimi.
click-replay: kliknutí se k vašemu handleru dostanou dál, ale animace se nepřehraje.
hover: najetí myší animaci nespustí.
hover-replay: najetí myší animaci nespustí.
hover-loop: ikona při hoveru zůstane statická.