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í.

CSS3 Železnice

Do soutěže Machr na webdesign pro týden (pokud vím dobře) 15 na téma CSS3 animace jsem si připravil animovanou železnici. S touto železnicí jsem získal 97/100 bodů. Byl jsem na druhém místě.

Moje první animace

Kdybyjste se podívali na mojí první CSS3 animaci (misaz.wz.cz/pa­ges/vlak), zjistili byste, že se taky týkala železnice. To byla moje první animace, kterou jsem vytvořil před:

AAA

Tehdy jsem mohl použít obrázky, což byla výhoda. Nicméně vidíte že kola se i tehdy točila špatně :) .

Oproti mé první animaci je v té do soutěže velký rozdíl.

Scény animace

Animace má 2 scény.

Scéna 1 (v kódu 0)

Na první (nulté) scéně se vyrábí parní lokomotiva. Magnety snášejí postupně jednotlivé části. Celé to probíhá tak, že je spousta animací (@keyframes) s délkou 60s. a každá v jiných procentech snáší části lokomotivy.

Scéna 2 (v kódu 1)

Na druhé scéně jsou dvě koleje. Na první koleje jezdí (spíše se plazí) parní lokomotiva. Jen pro zajimavost, v prostředním voze cestuje Alenka (v říši divů nebo spíš vlaků), nicméně to je jen detail. Na druhé koleji pak jezdí moderní elektrická lokomotiva ř. 150.

Tímto jsem chtěl ukázat, že pomocí scén by v CSS3 šel udělat i animovaný film.

V budoucnu budu programovat aplikaci, která bude generovat právě takovéto animované filmy, jenže bych na to asi potřeboval pomoc a možná to hodím do společných projektů.

Nezbývá než Alence v druhém vozu popřát příjemnou cestu.


Galerie

Program byl vytvořen v roce 2013.

 

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 625x (6.72 kB)
Aplikace je včetně zdrojových kódů v jazyce CSS

 

Všechny články v sekci
CSS3 zdrojákoviště
Program pro vás napsal Michal Žůrek - misaz
Avatar
Uživatelské hodnocení:
6 hlasů
Autor se věnuje tvorbě aplikací pro počítače, mobilní telefony, mikroprocesory a tvorbě webových stránek a webových aplikací. Nejraději programuje ve Visual Basicu a TypeScript. Ovládá HTML, CSS, JavaScript, TypeScript, C# a Visual Basic.
Aktivity