Advertisement
Web Developer Resources
You Are Here: ESQSoft.com ¬ javascript ¬ Parallax Scrolling Star Field Example Using Javascript and CSS
E.S.Q. Software Logo

Parallax Scrolling Star Field Example Using Javascript and CSS

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

(debugger output)

Issues:

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)

Additional Information and Resources

  • I used a similar technique while writing Hyper Lander, but the inspiration to do this using javascript animation was influenced by an example from a friend and mentor, which I've since lost track of. Visit Eric James Stone website.
  • Thomas Ballard - some additional examples and info from the author.

Additional Keywords: parallax,scrolling,star,field,example,javascript,css,javascript animation,game programming techniqes

Advertisement
Advertisement
StatCounter - Free Web Tracker and Counter