Animace na webových stránkách

O animování v samotném CSS pojednává článek animace pomocí transition. S tím si nevystačíme vždy (lze používat jen pár událostí). Pro zajímavější výtvory je třeba zkombinovat CSS se špetkou JavaScriptu.

JavaScript + CSS transition

Je to relativně jednoduché, postupuje se podobně jako u čistého CSS a událostí (:hover, :focus apod.), jen se reaguje na změnu třídy (.zmena), kterou prohazuje JavaScript.

CSS

button {background: red; transition: background 1s}
button.zmena {background: green}

Vytvořit lze ledasco.

Více CSS 3 animací ovládaných JavaScriptem

Čistý JavaScript

Nesmíme zapomínat, že CSS přechody fungují až od Internet Exploreru 10, tedy návštěvníci starších prohlížečů budou o takové animační efekty ochuzeni.

1. Jedna možnost je smířit se s tím — animace většinou nebývají pro web klíčové.
2. Další možnost je animovaný obrázek GIF (půjde použít jen někdy).
3. Nakonec zbývá řízení celé animace JavaScriptem (tomu se věnuje zbytek článku).

Podstata řešení je vytvořit časovač, který za danou dobu v daných intervalech bude měnit určitou CSS vlastnost. Tento časovač bude ve funkci a zároveň bude tuto funkci rekursivně volat.

JS funkce

function zmena(tlacitko) {
  tlacitko.style.opacity = Math.round((tlacitko.style.opacity-0.1) * 100) / 100;
  if (tlacitko.style.opacity) 
    setTimeout(function() { zmena(tlacitko) }, 30);
}

1. Tato funkce se spustí třeba po kliknutí na tlačítko (onclick="zmena(this)").
2. Nejprve se vezme současná hodnota opacity,
3. odečte se 0.1 (tj. 10 %),
4. provede se zaokrouhlení a již zaokrouhlená hodnota se použije jako nová hodnota průhlednosti,
5. pokud průhlednost není nula/false, spustí se funkce časovačem znovu.

Detailněji popsaná universálnější technika animování v JS je na:

javascript.info

JS frameworky

Většina JS frameworků (jako třeba jQuery) taktéž nabízejí pohodlné hotové funkce pro animování nebo dokonce hotové základní animace jako zmizení, odlétnutí, zmenšení a podobně.