Years ago it was quite common to see GIF animations all over the net. Basically we call GIF images to any image using the .gif extension. The Gif format provides a way to display a sequence of images one after another creating the illusion of an animation, same as the way cartoon movies were made in the past.
Currently the use of Gif animations in websites has dramatically decreased, but why? Although you can actually have GIF animations with end (no loop), the fact that the color palette is so reduced (up to 256 per frame) has taken an important role on it. Color graduations were not looking good at all and many transparencies were being affected by this restriction.
The modern way
We still want to show some animation in our websites from time to time. For some, we take courage and make use of CSS3 animations (and hopefully provide some fallback for non css3 browsers…)
A simple and quick solution
First, design your sequence of images. Remember now we will be able to use any image format (super quality images!). And please, do not use GIF format here or you won’t gain anything from this! :)
So, basically we will be creating a simple sprite of images and then using jQuery move the position of the image inside a container:
Here’s a fiddle in case you want to play a bit.
The sprite image I used for the example was taken from http://onlinedepartment.nl/.
Join 2,000+ readers and learn something new every month!