CSS3 Železnice

HTML a CSS Profesionální webdesign 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ženo 561x (6.72 kB)
Aplikace je včetně zdrojových kódů v jazyce CSS

 

  Aktivity (1)

Program pro vás napsal Michal Žůrek (misaz)
Avatar
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.

Jak se ti líbí článek?
Celkem (5 hlasů) :
55555


 


Miniatura
Všechny články v sekci
Profesionální webdesign v CSS 3

 

 

Komentáře
Zobrazit starší komentáře (20)

Avatar
Jiří Gracík
Redaktor
Avatar
Jiří Gracík:

Však to je jedině dobře. Flash je mrtvá technologie, ale bohužel je moc firem , které stále vytvářejí aplikace ve Flashi (což mě celkem zaráží, evidentně totiž nemají ani tendence přejít třeba na JS).

Odpovědět  +1 27.4.2013 19:05
Creating websites is awesome till you see the result in another browser ...
Avatar
Odpovídá na Jiří Gracík
Michal Žůrek (misaz):

js může být blokovaný. Možná to je to co je odrazuje od JS.

Odpovědět  +1 27.4.2013 22:23
Nesnáším {}, proto se jim vyhýbám.
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Jiří Gracík:

Flash nemusí být všude nainstalovaný. Navíc některý zařízení ho nemusejí zvládat ani výkonnostně ;) Jakej si myslíš že je poměr zařízení, kde je vypnutý nebo nejde JS a zařízení, kde není nainstalovaný nebo se nerozeběhne flash? Vem v potaz například školy, kde je běžně zakázáno instalace všeho možného, mobilní zařízení, já nevím co všechno :P

Odpovědět  +2 27.4.2013 22:28
Creating websites is awesome till you see the result in another browser ...
Avatar
Jiří Gracík
Redaktor
Avatar
Jiří Gracík:

Pořád si myslím, že JS je oproti Flashi bezporblémvá záležitost :)

Odpovědět  +1 27.4.2013 22:29
Creating websites is awesome till you see the result in another browser ...
Avatar
Jiří Gracík
Redaktor
Avatar
Jiří Gracík:

A co by případně nešlo udělat ve Flashi, tak nebude problém pro Javu :)

Odpovědět  +3 27.4.2013 22:30
Creating websites is awesome till you see the result in another browser ...
Avatar
Odpovídá na Jiří Gracík
Michal Žůrek (misaz):

Jo jenže ty firmy mohou dělat aplikace zaměřené na zařízení, kde js bývá vypnutý a flash nainstalovaný. Nicméně s tebou souhlasím.

Odpovědět 28.4.2013 8:52
Nesnáším {}, proto se jim vyhýbám.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Honza Bittner:

Tak jak jsi pokročil s filmíkem ? :)

Odpovědět 11.6.2013 22:13
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na Honza Bittner
Michal Žůrek (misaz):

zatím nijak :D ještě jsem se k tomu nedostal. :D teď to áme i ve škole takové hektické, tak možná začátkem prázdnin.

Odpovědět 12.6.2013 6:43
Nesnáším {}, proto se jim vyhýbám.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovědět 12.6.2013 7:52
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
vojtanosek
Člen
Avatar
vojtanosek:

Nikdy jsem nevěřil, že takové animace mžou mít tak dlouhý kód :O. Ale je ot tak. I hvězda ho má dlouhý.

 
Odpovědět 9.6.2015 22:30
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 30. Zobrazit vše