Thursday, December 30, 2010

Image Rotate Animation - Wowhead's Cataclysm's Maelstrom Animation

Element CSS transform rotation(-moz-transform:rotate() / -webkit-transform:rotate() / -o-tranform:rotate() ) is very unpopular cause it's not yet supported on all browser. (in a web developer language, not supported on all browsers means Not supported on IE:)) )

But just recently as World of warcraft's 3rd expansion, cataclysm, is released, wowhead, one of the most popular database website of wow attached a maelstrom animation on there header(It's something like a (very)huge catastrophic storm/whirlpool in the middle of the world of that game)

This is my non-jquery version of it (the code can be seen below)

This can be seen on all inner pages of this website like: http://www.wowhead.com/classes

Makes me think, there's alot of ways to play with it. Like Google Gravity does.

As I can imagine it, we can make solar system's rotation and revolution or an analog clock, analog tester, speedometer, pendulum and other things.

But of course, web developers should keep in mind that, like every other good things, Internet Explorer does not support this CSS property(ie. transform). And you cannot ignore that. But as for wowhead, it isn't necessary for that maelstrom thing to rotate, so that's some good way to implement it.

The Code

Note: wowhead's source code is minified so I didn't based it on there approach

http://albertdiones.co.cc/assets/js/wowhead-transform-rotation-animation.js

Labels: ,

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

<< Home