Animace čísel

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.