Friday, October 5, 2007

Cross Browser Animation

The fundamental idea behind animation has been around for a long time: when a group of images are presented quickly, the series of images seems to form a single moving picture. One of the first examples of this effect was the thaumatrope, a gizmo created by Paul Roget in 1828. A thaumatrope is a disk with a pole or string attached so the disk can be twirled. Each side of the disk contains an illustration, and twirling the disk merges the two illustrations, making it seem that there’s only one image. If the disk has a bird on one side and a cage on the other, twirling the disk gives the illusion that there’s just one image: a bird in a cage.

Animation on the web works in a similar way. In the Web’s early days animators could only use proprietary systems, like Shockwave, or animated GIF files. JavaScript expanded the animator’s repertoire to include rapid GIF swapping. Swapping GIFs with JavaScript makes for quicker downloads than proprietary systems and provides more flexibility than animated GIFs.

Dynamic HTML (DHTML) provides a new range of ways to animate a page. DHTML can animate both text and images and animations can move throughout the browser window, instead of being anchored in one spot. Unfortunately, DHTML can be tricky because of differences between browsers.

This article will cover the basics of cross-browser animation. You’ll learn how to animate text and images. Plus you’ll see how to move HTML elements around the screen. After you’ve finished reading this article, you should be able to add cross-browser compatible DHTML animations to your web pages.

Read More Article...

Related Posts by Categories



Widget by Hoctro | Jack Book

No comments:

Outsource Animation Services Outsourcing Services