// Apparently, programming, like life, is sometimes going in circles. Almost 30 years ago I was doing my first steps in programming, coding sprites on my MSX2 in some lame attempts at game development :) Today, I’m revisiting the technique for a whole different purpose. Below you can see an elegant approach to a hover animation from the home page of Rafael Gonzalves. Rafael is using jQuery and Spritely, a plugin that eases the development of animations to create a 3D effect.

In effect, the concept is simple: you have an image file with all the requires frames for the animation, and Spritely handles the transition of a div’s background between them. You can play with it and see the source code above. If you have any other examples of such animations, add them in the comments!