Jak navrhnout scroll-triggered počítadlo
Postupný návod na vytvoření počítadla, které se spustí při scrollování. Najdeš zde základní techniky a nejčastější chyby, které bys měl znát.
Proč se počítadla používají
Animovaná počítadla jsou jedním z nejefektivnějších způsobů, jak předvést statistiky a důležitá čísla. Když uživatel scrolluje dolů a vidí, jak se čísla postupně počítají, vytvoří to silnější dojem než jen statické číslo. To je psychologie. Lidé si pamatují věci, které vidí v pohybu, lépe než věci, které jsou jen tam.
Scroll-triggered animace je přitom jednodušší, než si myslíš. Nemusíš být expert v JavaScriptu — stačí ti porozumět základním principům. V tomto průvodci si projdeme všechno, co potřebuješ vědět.
Technické základy animace
Scroll-triggered animace funguje na jednoduchém principu: když uživatel scrolluje na místo, kde je tvoje statistika, JavaScript zjistí, že element vstupuje do viewportu, a spustí animaci. Nemusíš počítadlo animovat od začátku — můžeš ho spustit až když se skutečně zobrazí.
Nejlepší přístup? Použij knihovnu jako CountUp.js nebo Intersection Observer API . Nemusíš psát vše od nuly. CountUp.js ti dá hotové řešení pro samotné počítání, zatímco Intersection Observer API ti pomůže detekovat, kdy je prvek viditelný.
Konkrétně — když uživatel scrolluje, Intersection Observer sleduje, jestli je tvoje statistická sekce viditelná. Jakmile je, spustí callback funkci. V té funkci pak zavoláš CountUp a necháš ho počítadlo animovat. Trvá to obvykle 1,5 až 3 sekundy. Zkus si s těmito hodnotami pohrát — zjistíš, co se ti líbí nejvíc.
Výběr správného fontu
Zde je věc, kterou mnoho lidí opomíjí: když animuješ čísla v gigantických velikostech, font se stává kritický. Ne každý font vypadá dobře, když je velký 72 nebo 96 pixelů.
Bez přípravy si vybereš první font z nabídky a pak se divíš, proč to vypadá divně. Máš čísla, která jsou rozmazaná nebo mají podivné proporce. Řešení? Zvolte si font, který je speciálně navržen pro displeje. Fonty jako Poppins , Inter nebo IBM Plex Mono fungují skvěle. Mají dostatečnou čitelnost a nevypadají divně, i když jsou obrovské.
Další tip: v CSS nastavte
font-variant-numeric: tabular-nums;
. To zajistí, že všechny číslice budou mít stejnou šířku. Počítadlo tak nebude “skákat” doleva a doprava během animace. Vypadá to pak mnohem profesionálněji.
Poznámka k výkonu
Scroll-triggered animace mohou mít dopad na výkon stránky, pokud je máš příliš mnoho. Animuj jen ta čísla, která jsou opravdu důležitá. Pokud máš 20 statistik na stránce, vyber si 4-6 nejdůležitějších. Zbytek nech jako statické. Uživatelé si stejně všech nebudou všímat a tvá stránka bude běžet lépe.
Párování ikon s čísly
Číslo samo o sobě neznámená nic. “2500” — co to je? Bez kontextu je to jen číslo. Proto se čísla téměř vždy párují s ikonou a popiskem.
Struktura je jednoduchá: ikona nahoře (nebo vlevo), číslo uprostřed, popisek dole. Ikona by měla být intuitivní a jasná. Pokud mluvíš o počtu projektů, použij ikonu složky nebo souboru. Počet zákazníků? Ikona skupiny nebo uživatele. Není to složité — jen buď konzistentní.
Jedno varování: nepoužívej příliš tenké ikony. Když je ikona malá (řekněme 32×32 pixelů) a velmi tenké čáry, bude vypadat rozmazaně na běžných obrazovkách. Vybírej si ikony s tloušťkou 2-3 pixelů a vždy je testuj v aktuální velikosti. Zkusit ikonu v 40 pixelech a pak ji dej do designu na 80 pixelů — nebude to vypadat stejně.
Správné tempo animace
Teď se dostáváme k věci, která dělá rozdíl mezi amatérským a profesionálním vzhledem. Jak dlouho by měla animace trvat?
Příliš rychlá animace (0,3 sekundy) vypadá chaoticky. Uživatel neví, co se děje. Příliš pomalá (5+ sekund) nudí. Zlatý střed je 1,5 až 2,5 sekundy. V tomto rozmezí má uživatel dostatek času vidět animaci a cítit ji, ale není to unudující čekání.
Má to ale jednu výjimku. Pokud animuješ čísla, která jsou velmi velká (např. 1 000 000+), může trvat déle. Uživatel se může cítit frustrován, pokud počítadlo skáče příliš rychle — nestihne to číst. V takovém případě si vezmi 2,5 až 3 sekundy. Pro malá čísla (0-100) stačí 1,5 sekundy.
Shrnutí a nejčastější chyby
Chyba #1: Příliš mnoho animací
Pokud máš 30 statistik a všechny animuješ, stránka se bude krčit. Omez se na 4-6 nejdůležitějších.
Chyba #2: Špatný font
Bez myšlení na font se čísla mohou zdát rozmazaná. Vybírej si fonty určené pro displeje.
Chyba #3: Špatné tempo
Animace trvající 0,3 sekundy nebo 6 sekund působí neprofesionálně. Drž se 1,5-2,5 sekundy.
Chyba #4: Bez kontextu
Číslo bez ikony a popisku je jen číslo. Vždy přidej vizuální kontext a vysvětlení.
Scroll-triggered počítadla nejsou něco složitého. Je to jen CSS, HTML a malý kousek JavaScriptu. Pokud se držíš těchto zásad — správný font, vhodné tempo, kontextové ikony a omezený počet animací — budou tvá počítadla vypadat jako od profesionála. A tvoji uživatelé si budou statistiky pamatovat mnohem lépe.
Související články
