Jak navrhnout scroll-triggered počítadlo
Postupný návod na vytvoření počítadla, které se spustí při scrollování.
Správné tempo animace pro čtení
Jak rychle by se mělo počítadlo počítání? Přečti si, jak zvolit správnou rychlost pro maximální dopad a čitelnost.
Kdy se počítadlo stane efektivním?
Není to jen o tom, aby se čísla pohybovala. Je to o tom, aby se čísla pohybovala správnou rychlostí. Rozdíl mezi animací, která zaujme, a animací, která irituje, se měří v milisekundách a matematických funkcích.
Když navrhujeme počítadlo pro statistické sekce, máme tři základní cíle: zaujmout pozornost čtenáře, dát mu čas na přečtení výsledného čísla a udělat to vše tak, aby to vypadalo přirozeně. A přesně na to se zaměříme v tomto průvodci.
Zlatá zóna: 1000 až 2000 milisekund
Většina výzkumů se shoduje na jedné věci: počítadlo by mělo běžet přibližně 1 až 2 sekundy. Ne déle. Pokud si člověk bude muset čekat 3 sekundy, aby viděl konečné číslo, už se na něj koukat nebude. Mysl se nudí.
Konkrétně, 1200 milisekund je často považováno za ideální. Je to dost dlouho na to, aby animace byla viditelná a působila hladce, ale dost krátko na to, aby čtenář zůstal zainteresovaný. U počítadel pro růst tržeb nebo počtu uživatelů to znamená, že číslo dosáhne svého maxima právě když se lidský mozek snaží pochopit, co vidí.
Ale čekej — ne všechna čísla jsou stejná. Číslo jako 45 se počítá rychleji než 1 234 567. Musíš to přizpůsobit.
Jak upravit tempo podle počtu číslic
Tady přichází na řadu matematika. Pokud počítáš od nuly do 100, můžeš to zvládnout za 800 milisekund. Pokud počítáš od nuly do 1 000 000, potřebuješ déle. Rychlost počítání by měla být konzistentní — zvyklí jsme si na to, že čísla se mění konstantní rychlostí.
Praktické pravidlo: počítej s rychlostí přibližně 300 až 500 jednotek za sekundu. Takže pokud animuješ číslo 5000, budeš ho počítat tak 10 až 17 sekund… čekej, to je moc! To je přesně důvod, proč se easing funkce stávají důležitými.
Easing — to je jak si počítadlo “oddechne”. Ne všechny jednotky se počítají stejně rychle. Na začátku se počítá rychle, potom zpomaluje, aby čtenář stihla vidět finální číslo. Klasická easing funkce je ease-out, která dává iluzi přirozeného pohybu.
Easing funkce a hladkost animace
Lineární animace vypadá roboticky. Bez easing funkce se počítadlo počítá stejně rychle od začátku do konce — tak si to představ jako skoro nudné. Proto používáme easing. ease-out je nejlepší volba pro počítadla. Čísla se nejdřív počítají rychle, pak zpomalují.
Zkus si to sám. Když se podíváš na počítadlo s ease-out, připadá ti přirozeněji. Jako by se číslo samo zastavilo, když dosáhlo cíle. To je psychologie pohybu — a to je důvod, proč 90 procent animovaných počítadel online používá ease-out nebo ease-in-out.
Tipem: Pokud máš velké číslo (miliony), zkus cubic-bezier(0.25, 0.46, 0.45, 0.94) — to je mírně upravená ease-out, která vypadá luxusně.
Poznámka k čtenářům
Hodnoty a doporučení v tomto článku jsou založeny na běžných praktikách v oblasti webdesignu a interaktivní animace. Různá zařízení, prohlížeče a technologické konfigurace mohou ovlivňovat výkon a vnímání animací. Vždy testuj své animace na více zařízeních a v různých prohlížečích, aby sis ověřil, že fungují správně pro tvou konkrétní cílovou skupinu. Tipy zde jsou informatického charakteru a měly by být přizpůsobeny specifickým potřebám tvého projektu.
Stručně: Jaké tempo zvolit?
Takže co si odneseš z tohoto průvodce? Počítadlo by mělo běžet mezi 1000 a 2000 milisekundami. Pokud máš malá čísla (do 100), můžeš jít na 800 ms. Pokud máš velká čísla, přidej si pár stovek milisekund. A vždy — vždy — používej easing funkci, nejlépe ease-out.
Není to jen o fyzice pohybu. Je to o psychologii čtenáře. Správné tempo udržuje pozornost. Správné easing dělá animaci hladkou a příjemnou. A když dáš dohromady správné číslo, správné easing a správné prostředí, dostaneš počítadlo, které lidi opravdu vidí — a které jim zůstane v paměti.
Zkus si s těmito hodnotami pohrát. Každý projekt je trochu jiný. Ale teď už víš, kde začít.
Zpět na všechny články
