Letní akce! Lákají tě IT školení C#, Javy a PHP v Brně? Přihlas se a napiš nám do zpráv kód "BRNO 500" pro slevu 500 Kč na libovolný brněnský kurz. Lze kombinovat se slevami uvedenými u školení i použít pro více kurzů. Akce končí 28.7.

Vánoční stromeček

JavaScript jQuery Zdrojákoviště Vánoční stromeček

Unicorn College ONEbit hosting Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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

Program byl vytvořen v roce 2014.

 

Stáhnout

Staženo 50x (149.49 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

 

Program pro vás napsal Miroslav 'jimisek' Bahenský
Avatar
Jak se ti líbí článek?
1 hlasů
Autor se věnuje především web tvorbě pomocí PHP, CSS a HTML, sem tam přimíchá i JavaScript. Není mu cizí ani jazyk C, Java či většinou "milován" Pascal. Dále se věnuje jízdě na koni.
Miniatura
Všechny články v sekci
JavaScript zdrojákoviště - jQuery
Aktivity (1)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!