Welcome!

This weblog was the original abode of Abhijit Nadgouda, now it is moved to iface thoughts. He will appreciate it if you can carry discussions, if you want to, over there. He uses this blog to write specifically about Wordpress or Wordpress.com.

If you are reading any specific post dated on or before 17th August 2006, just replace the domain name with the new one, i.e., replace https://iface.wordpress.com with http://ifacethoughts.net and you will arrive on the same post in the new blog.

Flickr Photos

Affiliations

Traffic

67,764 hits

Flick Animation with CSS

February 23, 2006 — Abhijit Nadgouda

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.