jQuery 1.4 Animation Techniques - Index of

Full Page Animations
4. Save this file as parallax.css in the css directory. At this point the page should
appear like this:
The stage area is the ground, the foreground layer is the dark green bushes, the midground
is the light green bushes, and the background slice is the sky and clouds.
What just happened?
You'll also find the images for this example in the img folder of the code download
accompanying this book. We have a separate image for each element that we wish to
be part of the parallax effect, three in this example, one for the background, one for
the midground, and one for the foreground.
The underlying HTML is also very simple. We just have a separate for each layer of
the background. In the CSS, each image layer is positioned absolutely so that they overlay
each other.
Time for action – animating the background position
Now for the itself. At the bottom of the HTML file, in the empty function as usual,
add the following code:
var bg = $("#background"),
mg = $("#midground"),
fg = $("#foreground");
[ 188 ]