Vánoční stromeček

Aplikace „Vánoční stromek“ je napsaná v HTML5 s použitím knihovny jQuery a jQuery UI a CSS3. Po otevření index.html v prohlížeči se vykonají události v tagu body, přesněji NakresNaPlatno(); pozdrav(); darekVelky();

NakresNaPlatno(); nám pomocí JavaScriptu nakreslí stromek s kmenem do HTML plátna vytvořeného pomocí tagu canvas. Dále tento stromek vyplní barvou.

Funkce pozdrav(); zobrazí nadpis h1 „Šťastné a veselé Vánoce“ pomocí efektu fadeIn s hodnotou 1500ms, což vykoná kýžený efekt „plynulého zobrazení“.

Poslední z trojice funkcí, které se spustí při nahrání stránky je darekVelky();, která rozpohybuje dárek pod stromečkem tak, že začne skákat, čehož je docíleno pomocí efektu bounce z jQuery UI a jeho zacyklení, aby se dárek neustále pohyboval se 4 sekundovou přestávkou.

Dále je tu funkce pohyb(); která se spustí po kliknutí na událost onclick(); v divu, jenž znázorňuje velký dárek. Funkce spustí animaci, která posune autíčko, vytvořené z několika divů v CSS, doleva.

Z grafického hlediska není aplikace zajisté nejkrásnější, avšak na demonstraci použitích technik to, dle mého názoru, bohatě dostačuje.

Můžete si stáhnout balíček, obsahující veškeré soubory této aplikace, pod článkem.

Galerie