Do nového roku jako lepší programátoři? Znovu otevíráme večerní školu programování. Nette framework, návrhové vzory, testování nebo vůbec poprvé kurzy ASP.NET dostupné odkudkoli v republice.

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 44x (149.49 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

  Aktivity (1)

Program pro vás napsal Miroslav 'jimisek' Bahenský
Avatar
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.

Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!


 


Miniatura
Všechny články v sekci
JavaScript zdrojákoviště - jQuery

 

 

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í!