Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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žením následujícího souboru souhlasíš s licenčními podmínkami

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

 

Všechny články v sekci
JavaScript zdrojákoviště - jQuery
Program pro vás napsal Miroslav 'jimisek' Bahenský
Avatar
Uživatelské hodnocení:
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.
Aktivity