C a C++ týden ITnetwork Flashka zdarma
Akce! Pouze tento týden sleva až 80 % na kurzy C++. Lze kombinovat s akcí 50 % bodů navíc na prémiový obsah!
Brno? Vypsali jsme pro vás nové termíny školení Základů programování a OOP v Brně!

CSS3 Železnice

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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 595x (6.72 kB)
Aplikace je včetně zdrojových kódů v jazyce CSS

 

 

Program pro vás napsal Michal Žůrek - misaz
Avatar
Jak se ti líbí článek?
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.
Všechny články v sekci
Profesionální webdesign v CSS 3
Aktivity (1)

 

 

Komentáře

Avatar
Pelpet
Redaktor
Avatar
Pelpet:15.4.2013 15:36

Nevím, jak se na tohle tváří ostatní, ale nechápu, k čemu to je. Cokoliv v tomto stylu by na normálních stránkách působilo přinejmenším velmi neprofesionálně a stejně všechny ty "lepší" animace je většinou potřeba řešit před flash, protože to CSS3 nezvládne. Ten alespoň jede všude a i když ne, lze doinstalovat - narozdíl od CSS3 s jehož náhradou to je přinejmenším komplikovanější.

(Edit: chápu, že je to do soutěže, ale užití vidím nulové)

Editováno 15.4.2013 15:38
 
Odpovědět  -4 15.4.2013 15:36
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Pelpet
Honza Bittner:15.4.2013 15:39

To není až tak pravda... Dobrá animace se nemusí udělat ve flashi .. stačí na to CSS :)

Odpovědět  +1 15.4.2013 15:39
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Odpovídá na Pelpet
Neaktivní uživatel:15.4.2013 15:44

Flash (na webu) pomalu a jistě končí. HTML5 ho úspěšně nahrazuje.

Odpovědět  +1 15.4.2013 15:44
Neaktivní uživatelský účet
Avatar
Pelpet
Redaktor
Avatar
Odpovídá na Honza Bittner
Pelpet:15.4.2013 15:45

Neřekl jsem, že to nejde. Pokud však dostaneš zakázku na webdesign a tvůj chlebodárce je debil, co potřebuje 3D efekty a všechno aby se lesklo a kdesi cosi, nepoužiješ CSS3. Za prvé kompatibilita je velmi sporná a ne všude to funguje, jak má. Za druhé 3D efekty bys stejně už musel asi řešit přes nějaký javascript a kdesi cosi a je jednodušší použít flash jak pro designéra tak pro komp (výkonově). Užití CSS3 animací chápu u přechodů barev na tlačítkách atd. Prostě drobné animace na stránce... ne prezentaci na úvodní stranu... Proto kritizuji tyhle animace.

 
Odpovědět 15.4.2013 15:45
Avatar
Kit
Redaktor
Avatar
Odpovídá na Pelpet
Kit:15.4.2013 15:45

Flash nejede všude, potíže bývají s různými verzemi i jeho leností. Je to komerční produkt a jsou potíže s licencemi. CSS a Javascript jsou na tom mnohem lépe, proto je velmi vhodné se zaměřit na tvorbu v těchto nástrojích.

Odpovědět 15.4.2013 15:45
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
Pelpet
Redaktor
Avatar
Odpovídá na Neaktivní uživatel
Pelpet:15.4.2013 15:46

Až zmizí ten průbehový tvar, bude to něco jiného. Zatím jsou CSS3 animace na některé věci nepoužitelné.

 
Odpovědět  -4 15.4.2013 15:46
Avatar
Odpovídá na Pelpet
Michal Žůrek - misaz:15.4.2013 15:57

Flash si ale musíš instalovat, ve školách nainstalován typicky není, administrátor ti to nedovolí. Stejně jako ve školách, je to tak i v jiných institucích.

Webový prohlížeč je všude.

Největší zastoupení na trhu prohlížečů, mají moderní prohlížeče, které CSS3 animace chápou.

 
Odpovědět  +5 15.4.2013 15:57
Avatar
Kit
Redaktor
Avatar
Odpovídá na Pelpet
Kit:15.4.2013 15:57

Zrovna takový konzervativismus není na místě. Je nutné dávat přednost otevřeným technologiím před uzavřenými.

Odpovědět  +2 15.4.2013 15:57
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
Pelpet
Redaktor
Avatar
Pelpet:15.4.2013 16:07

Audio tag - kompatibilita se zvukovými formáty tak suprovní, že nestačí jeden formát aby pokryl všech 4-5 majoritních browserů, video tag totéž... W3C nevydá standardy a každý browser si pak razí svojí cestou (což souvisí s těmi formáty...).

Však proč bych definoval gradient jednou, když ho můžu definovat 5x a ještě pokaždé trochu jinak. Tohle jsou otevřené technologie, jo? Navíc třeba tag <livestream> asi nic, že...

Nic proti novým technologiím, ale dost velké něco proti technologiím, jejichž použití je na hovno.

 
Odpovědět 15.4.2013 16:07
Avatar
Odpovídá na Pelpet
Neaktivní uživatel:15.4.2013 16:09

To bude tím že třeba CSS 3 není finální :` ...

// s HTML5kou nevím jak to je

Editováno 15.4.2013 16:10
Odpovědět 15.4.2013 16:09
Neaktivní uživatelský účet
Avatar
Pelpet
Redaktor
Avatar
Odpovídá na Neaktivní uživatel
Pelpet:15.4.2013 16:13

Proto jsem psal taky "Až zmizí ten průbehový tvar, bude to něco jiného." v reakci na "HTML5 ho úspěšně nahrazuje."

Přestávám se hádat, myslete si co chcete, ale kdyby HTML5 a CSS3 byly jednotné ve všech browserech, všude fungovaly stejně, podle standardů/norem, byly by to úžasné technologie. Jenže nefungují všude stejně a jistě si všichni designéři libují, když musí furt používat ty tzv. "hacky", aby se to chovalo všude aspoň přibližně stejně, nebo každou věc v CSS3 definovat vícekrát.

 
Odpovědět 15.4.2013 16:13
Avatar
Odpovídá na Pelpet
Michal Žůrek - misaz:15.4.2013 16:16

Tak proto budeme raději používat pomalý flash, kde nemáme jistotu jestli ho má vůbec uživatel nainstalovaný...

Ano inženýři to dělají občas špatně, s tím musím souhlasit. Jenomže to je stejné jako všechny spory na světě. Jeden prohlížeč si stojí za OGG druhý za MP4. Každý bude hájit svoje. Každý prohlížeč bude říkat že ta jeho volba je nejlepší.

Ty (a spousta dalších) se s tím musí smířit, že vše není tak růžové, jak by se mohlo zdát.

Pokud to chceš přirovnat ke sporu z realneho světa, tak se podívej na sebe. Ty si tu stojíš za tím, že flash je lepší než CSS3. My se ti to zas snažíme rozmluvit.

 
Odpovědět 15.4.2013 16:16
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Pelpet
David Čápka:15.4.2013 16:17

W3C standardy vydává, to je také důvod jeho existence. Specifikace CSS3 je rozpracovaná, proto jsou u některých vlastností prefixy nebo potíže s kompatibilitou, které za několik měsíců, max. let vymizí. Spousta vlastností již prefixy nemá. Flash je naprosto mrtvý a nikdo do něj již neinvestuje, je to uzavřená a problematická technologie.

Odpovědět  +2 15.4.2013 16:17
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
vojaceklibor
Člen
Avatar
vojaceklibor:23.4.2013 23:20

Ahoj,
tvoje animace se mi moc líbí, akorát někdy se kola točí na druhou stranu, než by logicky a fyzikálně měla. ;D

 
Odpovědět  +1 23.4.2013 23:20
Avatar
ano95
Člen
Avatar
ano95:26.4.2013 21:45

v nazve mas Zelezice

 
Odpovědět  +1 26.4.2013 21:45
Avatar
Odpovídá na ano95
Michal Žůrek - misaz:26.4.2013 21:48

díky, opravil jsem.

 
Odpovědět 26.4.2013 21:48
Avatar
xxxvodnikxxx
Člen
Avatar
Odpovídá na Pelpet
xxxvodnikxxx:27.4.2013 9:30

Flash zatěžuje procesor "asi tak 1000x víc" než CSS & HTML, navíc HTML5 a CSS3- jó, ty zvládnou kouzla, a flash je amatérskej, když se v něm něco udělá, chce se to upravit, musí se upravit 'celej projekt', znovu nahrát, v tomhle se přepíše jen něco co se můžeš commitnout a vesele se jede dál, s minimálním zásahem a výpadkem :)
Navíc je flash oproti tomuhle pěkně děravej (v css neni místo, kde by se dala najít díra), a taky už pomalu, ale jistě ztrácí podporu (např. na android tušim, že oficiál Adobe Flash už na GPlay ke stažení neni), atd, atd.. =)
btw mrkni sem http://animateyourhtml5.appspot.com/pres/index.html#1

Odpovědět 27.4.2013 9:30
Unix- svět, kde chcete být nulou :) (UID)
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na xxxvodnikxxx
David Čápka:27.4.2013 9:43

Velmi dobré demo :)

Odpovědět  +1 27.4.2013 9:43
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
xxxvodnikxxx
Člen
Avatar
xxxvodnikxxx:27.4.2013 9:48

když už jsem v komentech zabrousil i do html5, tak nevim, zda víte o tomto
http://www.youtube.com/html5
:)

Odpovědět 27.4.2013 9:48
Unix- svět, kde chcete být nulou :) (UID)
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na xxxvodnikxxx
David Čápka:27.4.2013 9:50

Jo, vím o tom, že na tom Google dělá, aby nebyl na Flashi závislý :)

Odpovědět 27.4.2013 9:50
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Odpovídá na xxxvodnikxxx
Neaktivní uživatel:27.4.2013 19:05

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
Neaktivní uživatelský účet
Avatar
Odpovídá na Neaktivní uživatel
Michal Žůrek - misaz:27.4.2013 22:23

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
Avatar
Odpovídá na Michal Žůrek - misaz
Neaktivní uživatel:27.4.2013 22:28

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
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel:27.4.2013 22:29

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

Odpovědět  +1 27.4.2013 22:29
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel:27.4.2013 22:30

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
Neaktivní uživatelský účet
Avatar
Odpovídá na Neaktivní uživatel
Michal Žůrek - misaz:28.4.2013 8:52

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
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Michal Žůrek - misaz
Honza Bittner:11.6.2013 22:13

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

Odpovědět 11.6.2013 22:13
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Odpovídá na Honza Bittner
Michal Žůrek - misaz:12.6.2013 6:43

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
Avatar
Honza Bittner
Šupák
Avatar
Odpovědět 12.6.2013 7:52
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
vojtanosek
Člen
Avatar
vojtanosek:9.6.2015 22:30

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 30 zpráv z 30.