Vianočný stromček

Aplikácia "Vianočný stromček" je napísaná v HTML5 s použitím knižnice jQuery a jQuery UI a CSS3. Po otvorení index.html v prehliadači sa vykonajú udalosti v tagu body, presnejšie NakresNaPlatno (); pozdrav (); darekVelky ();

NakresNaPlatno (); nám pomocou JavaScriptu nakreslí stromček s kmeňom do HTML plátna vytvoreného pomocou tagu canvas. Ďalej tento stromček vyplní farbou.

Funkcia pozdrav (); zobrazí nadpis h1 "Šťastné a veselé Vianoce" pomocou efektu fadeIn s hodnotou 1500ms, čo vykoná želaný efekt "plynulého zobrazenie".

Posledný z trojice funkcií, ktoré sa spustí pri nahraní stránky je darekVelky () ;, ktorá rozhýbe darček pod stromčekom tak, že začne skákať, čoho je docielené pomocou efektu bounce z jQuery UI a jeho zacykleniu, aby sa darček neustále pohyboval so 4 sekundovou prestávkou .

Ďalej je tu funkcia pohyb (); ktorá sa spustí po kliknutí na udalosť onclick (); v divu, ktorý znázorňuje veľký darček. Funkcia spustí animáciu, ktorá posunie autíčko, vytvorené z niekoľkých divov v CSS, doľava.

Z grafického hľadiska nie je aplikácia zaiste najkrajšie, avšak na demonštráciu použitiach techník to, podľa môjho názoru, bohato postačuje.

Môžete si stiahnuť balíček, obsahujúci všetky súbory tejto aplikácie, pod článkom.

Galéria