This example demonstrates a parallax scrolling animation technique using JavaScript and DOM in a web based environment. Parallax scrolling is a method of creating the illusion of 3D depth on a 2D canvas by layering images and moving each layer at an increasing rate starting from the layer furthest away from the viewer and proceeding toward the viewer.
This animation technique is used widely in the game programming world, but it's less prevalent in the web programming world, at least in javascript programming. JavaScript animation is different than client side game programming in both syntax and effect. Here you are stuck with more layers of application that you are reaching down through to achieve the animation effect. With client side game programming, you have more control of the intermediary programming layers and thus as a programmer, you have more opportunity to speed up your animations by writing your own screen update routines in assembly language for example. However, in web programming, particularly when using JavaScript, you are stuck with extra overhead because you must rely on built-in constructs for writing to the screen etc. Those constructs also rely on the browser being used, which OS it's sitting on, and then how fast the connection, and machine is, that the visitor is using. But, all that mundanity aside, the fact that you can even use javascript animation this way is just cool!
This example uses three layers of star field images to wallpaper the background of three containers.
Here are the images reduced in size to 100x100 pixels.
By creating the images with large areas of transparency, you achieve the effect of permitting the viewer to
see down through all the layers and visually ascertain a single image from all the layers. Then when
the effect of applying different rates of acceleration to each layer is applied the affect on the viewer is
one of depth. I've seen the effects combined with very cool masking techniques
(Hyper Lander is one such project
that involved such techniques to achieve an earth quake effect throughout the boards of the game.)
Because the images are transparent
1. Browser Caching
Developers tend to turn off their browser caching... this condition can result
in pounding the server for graphics each time modifications to an image object
(yes backgrounds too) are made... ie every 50 milliseconds another GET for
"graph1.gif" shows up in the access log on the server. Check for this before
you burn up your bandwidth or upset your sys admins! Suggestions for resolutions
to this problem are welcome (please don't suggest pre-caching unless you can
demonstrate that your method actually works with browser caching turned off)