Animation has always meant a resource consuming activity, either the size is too big and requires binary formats like Flash or GIF or client side scripting like JavaScript to be run. All of them depend on the user having installed or activated a feature in the browser. You providing such content does not always guarantee its delivery to the user. A nice alternative to this is Flick Animation with CSS.
Stu Nicholls writes about how CSS can be used to create animation from frames using pure CSS.
To come to grips with Flick Animation it is necessary to understand the principle behind it. The images are split (vertically in this article, although horizontally will work equally as well) into equal sized transparent ‘link strips’ which then expand to the full size of the image when the mouse is hovered over them. At the same time the image is moved behind the other ‘link strips’ so that they are still available when the mouse moves over them.
This methods requires a little interaction from the user. The individual images are wrapped in an anchor and the hover attribute of anchor is used to display image associated with it. The actual images can be stacked up horizontally or vertically and are then made visible on the hover action by the user. The hovering action triggers movement or visibilty of the images. An example for this is:
<a href="#no"><img src="f1.jpg" alt="frame 1" /><b>F1</b></a>
This not only ensures reduced total size of the final image files, but this is also independent of third party plugins or client side scripting. The only restriction is that the the DOCTYPE must be one of the Valid DOCTYPE list from W3C. Stu Nicholls has provided code in the article as well as you can view at the CSS and XHTML code here. You can use the Web Development Extension for Firefox to view CSS and experiment with it locally. I have tested it in Mozilla Firefox and Microsoft Internet Explorer.
In context of photo blogs, this can be used very effectively to show slideshows. In WordPress, this can be used in the theme template for posts or pages, wherever you wish to show animation.
Here are couple of more illustrations:
Technorati tags: css, cascading style sheets, flick animation with css, flick animation, animation, hover, images, slideshow, photo blog, mozilla firefox, internet explorer, flash, gif, javascript
Copyright Abhijit Nadgouda
Image may be NSFW.
Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
