Real Animation Using JavaScript, CSS3, and HTML5 Video
11 Comments
Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.
Got something to add? You can leave a comment below.
Dan
NP, Dan.
Video content for interaction and other forms of non-primary content will hit the web big tiiime.
Dustin Hansen
By far the best article this year! Thanks for an article that exemplifies what I’ve come to expect from 24ways.
I’ve just begun to test animation with both jQuery and Mootools, and have noticed a very mechanical feel to it, but could never quite put my finger on why. This explains a lot, and I’ll definitely be picking up a book this week. ;-)
Thanks again, Dan!
Anthony Calzadilla
Great article. There are a bunch of great tips that I’m definitely going to use in my next CSS3 animation. I’ve found that animating elements using different CSS positioning values results in choppy animation on mobile devices. The solution? The new CSS3 translate() property. I recently fixed a CSS3 animation by converting all the keyframes from positioning to translate(). Thanks again!
Matthew Farag
I’ve been saying this for years to my fellow designers, but thank you, Dan, for telling the world.
Animation doesn’t just have to be superfluous eye-candy; metaphor can help make computers seem more familiar and less intimidating to my grandmother.
Quick heads up, the video has a different color profile than the site graphics, making it possible to see the video:
http://cl.ly/3e3Q
Nicolas Chevallier
Thanks for this introduction to CSS3 animation. I think that new tools will be released to support and create such animations, but when?
Mark
Very good article Dan. This is a good awareness of what you can do with CSS3. This article made me invest more time in jquery and CSS3.
Lately I see more and more professional websites using this, so I guess it will be the future of webdesign.
Anurup Raveendran
Your article was immensely interesting. I’ve been working on Javascript for quite some time. I’m a huge gaming fan as well. I tried to develop a few games using C++ frameworks but they were too resource hungry. I thought I’ll start with lighter frameworks and work my way up.
By the way the link you posted for the demos is giving a 403 Forbidden error.
Cheers
Jamy
Awesome article! I’m definitely going to try something like this out.
Note: The anchor link which links to http://24ways.org/Scalable takes me to a 404 page.
Ali Lane
I haven’t read the whole article yet but I’ve looked through all the demo’s. Really smart. The video element is a cracking idea.
Needless to say, this has been bookmarked for future reference : )
Tor – Thanks for the heads up. For this proof of concept, I’m not terribly worried about color issues. For production use, you’ll certainly want to make sure the transition from static graphic to video back to static graphic is as seamless as possible.
Nicolas – Your guess is as good as mine, although I’d wager that there are some things in production that will soon be released.