Slnko, Zem a Mesiac v CSS3

04.07.2011 21:28 ·

Kaskádové štýly verzie 3 uľahčujú prácu s animáciami, transformáciami, tieňovaním a inými vizuálnymi prvkami na stránke. Niektoré z nich použijem na vytvorenie malého planetária.

Analýza požiadaviek

Úlohou je vytvoriť animáciu obehu Mesiaca okolo Zeme, obeh Zeme okolo Slnka a rotáciu Zeme a Slnka okolo svojej osi. Zem a Slnko má svetelnú žiaru - modrú atmosféru a oranžový plazmový obal. Hrúbka obalu Slnka sa v určitom rozmedzí náhodne mení.

Slnko, Zem a Mesiac v CSS3

Návrh riešenia

Bude preto nutné vyriešiť 3 úlohy:

  • nastavenie štýlov
  • rozmiestnenie prvkov
  • animácia

Nastavenie štýlov

Planéty sú klasické obrázky, ktoré majú pomocou vlastnosti border-radius zaoblené rohy, čím vznikne guľový tvar. Žiaru vytvoríme pomocou vlastnosti  box-shadow.

Rozmiestnenie prvkov

Aby bolo možné planéty otáčať čo najjednoduchšie, nachádzajú sa v blokoch. Hlavný blok je space, v ktorom sa nachádza obrázok Slnka a blok earth_moon, vo vnútri ktorého je obrázok Zeme a Mesiaca. Slnko sa má nachádzať zhruba v strede stránky, Zem a Mesiac cca 4 cm vedľa. Použitie blokov má význam z hľadiska prejavenia rotácie celého obsahu v ich vnútri.

Animácia

Na pohyb planét použijeme jazyk JavaScript. Blok space (obsahuje planéty) a Mesiac okolo Zeme budú rotovať vpravo, Zem a Slnko okolo svojej osi vľavo. Štandardnou funkciou setInterval nastavíme vykonávanie animácie v pravidelnom časovom intervale. Každou iteráciou inkrementujeme premennú deg, ktorá určuje uhol rotácie. Po dosiahnutí hodnoty 360 ju nastavíme na 0.

Záver

Výsledok práce nájdete na stránke Space in CSS3.

V zdrojovom kóde súboru je viacero rôznych zápisov rovnakej vlastnosti kvôli kompatibilite prehliadačov. Testoval som IE9, Firefox 5 a Chrome 12. V IE zrejme vďaka hardvérovej akcelerácii animácia vyzerala urýchlene, Firefox len vykreslil scénu bez pohybu objektov, v Chrome bol schodovitý charakter otáčania.

Charakteristiku a príklady použitia spomenutých vlastností nájdete na w3schools.com. Mojou inšpiráciou pred vytvorením tejto animácie bol projekt The Planetarium, ktorý je podstatne prepracovanejší, i keď planéty nerotujú.

Komentáre:
06.07.2011 21:37 [1] Peťo | Zobraziť
07.07.2011 00:06 [2] vasava
Aplikácia, na ktorú odkazuješ je robená cez flash. V CSS3 by také niečo zavarilo PC. Riešením by mohol byť webGL alebo svg.
| web
28.04.2012 22:36 [3] sabina kusa | Zobraziť
Pridať príspevok

meno
e-mail (nutný pre zobrazenie gravatara)
web
opíšte číslo päť

v okne