Responzivní je heslo dne a tutoriál CSS3 Animated Media Queries vám kromě přehledné šablony pro implementaci media queries ukáže, jak animovat přechody mezi jednotlivými styly a odkáže vás na pár příkladů.
Když se mi nechce pracovat, učím se :-)
Zkoušel jsem vytvořit takové ty animované tečky symbolizující, že se něco nahrává.
The swankiest Javascript framework for elegantly sliding pages and parallaxing backgrounds.
Není úplně perfektní, ale bookmark si zaslouží.
Další hezký tutoriálek od Codrops.
Opět jeden tutoriálek od Codrops a opět platí, že jejich příklad je až moc výrazný, v praxi by se asi tak silný efekt hodil jen málokde. Nicméně, v jemnější variantě si to představit dovedu.
Tutoriál na Codrops popisuje, jak na efekt, kdy při skrolování přijíždí objekty na scénu. Pozor, je to zatím celkem náročné na výkon počítače a nefunguje to na iPadu.
A tohle nebude určitě jediný způsob, jak to udělat.
V návaznosti na předcházející post: Ukázka dobré animace. Klikejte na červené tlačítko vlevo dole.
Via @PetrKaleta
Když píšu „opatrně s těma animacema”, tak myslím, abyste nedopadli přesně jako Asus.
Tenhle typ animace, kdy objekt „přijede na scénu”, je velmi výrazný, skvělý pro efektní upoutání pozornosti, ale když to přeženete, výsledek vypadá asi jako žena, která to přehnala s makeupem. Zde navíc opepřeno tím, že celá stránka je kvůli tomu ještě pomalá k nepoužitelnosti (iMac, Core 2 Duo 3GHz, Safari).
Via @ladadurchanek
Javascriptová knihovna pro tvorbu animací.
„CAAT is a multi-instance director-based scene-graph manager.
It is able to render using Canvas, WebGL and CSS with the same code base.
Features actors, containers, scene transitions, behaviors, interpolators, paths, custom affine transformation stack, timers, elements lifecycle, etc.”
Podívejte se na dema nebo na tuhle hru ve verzi využívající canvas.
Více s tagy „javascript animation” v mých záložkách.
Většina příkladů v tutoriálu se mi nelíbí. Posílám to dál pro inspiraci, co je možné a pro zamyšlení, kde byste něco podobného mohli použít vy.
Animace oživují uživatelské rozhraní, ale když to přeženeme, stvoříme Frankensteina.
Přidáno 15. 10. 2012: Tento článek má volné pokračování v mém příspěvku HTML5 vs. Flash player
Z tiskové zprávy Adobe:
„Our future work with Flash on mobile devices will be focused on enabling Flash developers to package native apps with Adobe AIR for all the major app stores.
…
We will continue to leverage our experience with Flash to accelerate our work with the W3C and WebKit to bring similar capabilities to HTML5 as quickly as possible, just as we have done with CSS Shaders.”
Tedy, Flash (jako program, vývojový nástroj) bude od nynějška cílen na vytváření nativních aplikací pro mobilní platformy a to, co jsme znali my jako flash na webu se přesune do HTML5 (používáno jako zastřešující termín pro kombinaci HTML5, CSS3 a JavaScriptu.). Z toho logicky plyne, že na to bude jiný vývojový nástroj, třeba Adobe Edge.
Pak jsme vyměnili pár tweetů…
Čtěte dál
Pro inspiraci, co lze jednoduše udělat, když se použije pár transition a transform animací. Jako vždy je ale potřeba uplatnit soudnost a vkus. Některé ty ukázky jsou vyloženě odstrašující. Animace jsou silný nástroj v uživatelském rozhraní a dá se s nimi lehce hodně pokazit. Všichni máme rádi flashová intra, že… ;-)
„animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.”
Používat s rozumem. A vkusem ;-)
