Time for action – creating the stage and adding the styling

The underlying page requires just five elements (for this simple example), which sit in the <body> of the page.

  1. Add the elements in the following structure to a fresh copy of the template file:
    <div id="background"><!-- --></div>
    <div id="midground"><!-- --></div>
    <div id="foreground"><!-- --></div>
    <div id="ground"><!-- --></div>
  2. This page can be saved as parallax.html. Don't forget to link to the cssHooks file that we'll be using in this example after the link to jQuery at the bottom of the <body>:
    <script src="js/jquery.js"></script>
    <script src="js/bgpos.js"></script>        
    <script>
  3. The CSS in this example is equally as simple as the underlying HTML. Add the following code to a new file in ...

Get jQuery 1.4 Animation Techniques Beginner's Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.