Turn off the ‘sky’ layer and turn on the ‘level1’ layer. Again choose File > Save for Web & Devices. This time make sure the Transparency box is ticked, and choose PNG-24 again. This image is the furthermost plane of landscape, so it wants to move a little more than the sky; make it 990 pixels wide, then click Save.
Repeat the previous step for each of the remaining planes: ‘level2’, ‘level3’ and ‘title’. Make sure each is bigger than the last by using the Resize options in the Save for Web dialog. Make a note of the sizes you choose, bearing in mind the bigger the image, the more it will move as you pan around, so the closer it will appear to the camera.
Open up the JQuery website in your browser (jquery.com) and download the latest version of the JQuery framework. Next create a new HTML document in Dreamweaver (or another HTML editor). You need the bare bones of an HTML page, including a
We need to create the HTML that will be used to display the images in the browser window. We’re using CSS backgrounds for our code, but you could use the
The next code to enter is really quite long; you can find it in Step 7 on the cover CD or within the Zip file. In the
Note that the viewport is positioned relatively, and each of the image layers is positioned absolutely. We’ve also set each layer to be positioned centrally by using negative left and top values, and set the overflow property for the viewport to hidden to ensure you can’t see the layers outside the area of the viewport.
Test the page in your browser and you should see everything lining up perfectly to create an image. The image is static however, so we’ll deal with adding the parallax functionality now. Start by adding a link to the JQuery library you downloaded earlier. Add the following to your