JavaScript animation isn't difficult to create but it does require planning.
Your first consideration should always be the design of the animation, what purpose it will serve, and how it will aid in the communication of your message.Your next consideration is to resolve browser compatibility issues. This is no big deal. Just copy my scripts and paste them into your pages as needed!
You'll also need to cache (pre load) your images so they're available when you need them. Again, this is no big deal.
And finally, JavaScript animation works by literally replacing one image with another. For this to happen you'll need to select a JavaScript "event" that triggers this swap.
This tutorial covers all these issues in detail. There are also examples that you can download, modify, and use in your own web pages.
We close with a section on the dangers and pitfalls you may experience when creating animation with JavaScript.
Originally, it took server-side scripts and open network sockets to create web animation. Today, web animation is much easier to create. And web developers have many options for animating images on the web.
JavaScript animation offers several key advantages over other forms of animation:
- The developer has complete control over when and how images are sequenced (unlike animated GIFs or GIF89a files,
- The vast majority of browsers support JavaScript animation without additional software or plug-ins,
- The viewer may control when and how the animation occurs (interactivity).
Any movement (regardless of quality) on an otherwise static web page will attract the viewer's attention. That being the case, make sure that your animation is more worthy of attention than those things that are not moving.The worst reason to use animation is because "it's cool", or you're looking for some way to "jazz-up", "activate", or "ignite" your web pages.
Don't yield to hype! Make sure your use of animation communicates more about your content than it says about you the developer.