Animated Frames with CSS and JavaScript

“For frame based animation, we will stack our animation frames vertically, and some sizes related to height should be defined in pixels, that’s not condsidered good in terms of accessibility indeed as Internet Explorer users cannot change the sizes of fonts defined in pixels, but we need it for the simplicity of the tutorial. Stacking frames horizontally and setting the vertical positions to 50% would be “awesome”, but Opera has a bug I’ll explain later.

However, it is still possible to compensate for different sizes of text in animation with few modifications to our image design principles and code, which I may display in another article. Ironically, if you like to change, font-sizes on web pages, Opera is a superb alternative which doesn’t break pages while resizing, and works perfectly with this technique while allowing the users to read content with gigantic font sizes.

Preparing the images

In this example, each frame is 210*30px. The size of the frames does not necessarily have to be the same as the element(s), for example, anchors on this page are actually 150px wide. Likewise, they wouldn’t need to be of the same size height either, as you could go for such styles that would account for elements with different heights.

We will vertically stack all animation frames. Sadly, for best accessibility, stacking frames horizontally would have been better, as we could place the background image 50% vertically to account for different heights without having to compensate for that in our images; but Opera has problems with ultra wide background images so some frames go missing and background images are misplaced. One of the few times I am let down by Opera…”

Read the full article by Hesido complete with full examples and information about XHTML methods.