As browser technology has improved, JavaScript has come of age, and frameworks such as JQuery allow us to push the envelope of what’s possible in HTML pages.


In this tutorial, Sam Hampton-Smith shows how to create an interactive image on a webpage using the principles of parallax scrolling.

Parallax scrolling helps convey a sense of depth and distance within a scene. Objects further away move more slowly than those close up.

Hugely popular in 1980s video games, it used to be impossible to create in-browser without resorting to Flash.

However, the latest generation of browsers, JavaScript engines, and CSS has made parallax effects possible.

We’ll create a series of graphics at different sizes, stack them, and move them at different rates within a viewport. We’ll then create some simple JQuery code to move layers as the mouse moves.

The code we’ll create is flexible enough to cope with as many layers of parallax as desired, for a compelling interactive result.

For all steps where there is code to enter, you’ll find a text document on the cover CD with the relevant code so that you can simply copy-and-paste it in; each document is named after the step it is related to.


Step 1
Open desolation.ai from the cover CD - or from the zip file provided opposite - in Illustrator, or if you prefer, create some artwork of your own, in Illustrator or Photoshop. Separate each plane of distance onto a new layer or new file, so that you can save these out individually later.

Bear in mind that as you get closer to the camera point, objects on these layers will need to be bigger. In Illustrator this is fine because vectors are resizable, but in Photoshop you’ll need to plan ahead.



Step 2
Turn off all the layers except the sky, then choose File > Save for Web & Devices. Our viewport or ‘camera’ is going to be 960 pixels wide, and we’d like the sky to move a little, but not too much, so save this image at 980 pixels wide by going to the Image Size tab and entering a width of 980 pixels. Use the PNG-24 preset and save.