Moderní tvorba webových aplikací

O webu

Animace čísel

Animování číselných dat pomocí JavaScriptu.

3 minuty

Vytvářet na webu animace různých CSS vlastností je díky transition a @animation poměrně snadné, jak ale animovat čísla? To jest vytvořit odpočítávání, kde se třeba desítka vymění za devítku, ta za osmičku a tak dále…

  1. Jedna možnost je všechna čísla nastrkat do HTML kódu a šikovně je posouvat, až vytvoří výsledný efekt. Pozor, vlastnost content není možné animovat.
  2. Při odpočítávání/dopočítávání větších čísel nebo dokonce čísel z desetinnými místy bude přece jenom elegantnější použít JS animaci, která bude přímo měnit obsah elementu v HTML kódu.

countUp.js

Stránka countUp.js Demo

CountUp.js je hotové řešení plynulé změny čísel přes JavaScriptovou animaci.

Použití

Použití je pohodlné. Po připojení skriptu to vypadá následovně (pozn.: doba není v milisekundách, jak by se dalo čekat, ale ve vteřinách).

var odpocet = new countUp("idElementu", prvniCislo, druheCislo, pocetDesetinnychMist, doba);
odpocet.start();

Nakonec je možné animaci zastavit:

odpocet.stop();

Nebo resetovat.

odpocet.reset();

Pro použití na českém webu by bylo vhodné dle zvyklostí prohodit desetinnou tečku za čárku.

Podpora v prohlížečích

Animace jsou funkční i v IE 6.

Související články

Časovače v JavaScriptu

Jaké nabízí JavaScript možnosti pro vytváření animací. A jak docílit toho, aby byly plynulé.

15 minut

Detekce otevření DevTools

Jak zjistit, že se na stránce otevřely vývojářské nástroje.

13 minut

JavaScript null a undefined

Rozdíly mezi null a undefined v JavaScriptu, kdy je používat a jak se vyhnout běžným chybám.

12 minut

Sleep v JavaScriptu

Jak implementovat sleep/delay funkcionalitu v JavaScriptu pomocí Promise a async/await

6 minut

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025