Vánoční stromeček

JavaScript jQuery Zdrojákoviště 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

Program byl vytvořen v roce 2014.

 

Stáhnout

Staženo 41x (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í!