CSS3 Železnice

Do súťaže Machr na webdesign pre týždeň (pokiaľ viem dobre) 15 na tému CSS3 animácie som si pripravil animovanú železnicu. S touto železnicou som získal 97/100 bodov. Bol som na druhom mieste.

Moja prvá animácia

Kdybyjste sa pozreli na mojej prvej CSS3 animáciu ( misaz.wz.cz/pa­ges/vlak), zistili by ste, že sa taky týkala železnice. To bola moja prvá animácia, ktorú som vytvoril pred:

AAA

Vtedy som mohol použiť obrázky, čo bola výhoda. Avšak vidíte že kolesá sa aj vtedy točila zle .

Oproti mojej prvej animácii je v tej do súťaže veľký rozdiel.

Scény animácie

Animácia má 2 scény.

Scéna 1 (v kóde 0)

Na prvý (nultej) scéne sa vyrába parná lokomotíva. Magnety znášajú postupne jednotlivé časti. Celé to prebieha tak, že je veľa animácií (@keyframes) s dĺžkou 60s. a každá v iných percentách znáša časti lokomotívy.

Scéna 2 (v kóde 1)

Na druhej scéne sú dve koľaje. Na prvý koľaje jazdí (skôr sa plazí) parná lokomotíva. Len pre zaujímavosť, v prostrednom voze cestuje Alenka (v ríši divov alebo skôr vlakov), však to je len detail. Na druhej koľaji potom jazdí moderný elektrický rušeň ř. 150.

Týmto som chcel ukázať, že pomocou scén by v CSS3 išiel urobiť aj animovaný film.

V budúcnosti budem programovať aplikáciu, ktorá bude generovať práve takéto animované filmy, lenže by som na to asi potreboval pomoc a možno to hodím do spoločných projektov.

Nezostáva než Alici v druhom vozidla popriať príjemnú cestu.

Galéria