jQuery Parallax Scrolling – Build Your Own 1980’s Video Game!

What is old is new again. Inspired by the recent crop of css parallax techniques. I thought it would be cool to take it one step further and introduce parallax scrolling. Thus the jQuery Parallax plugin was born.

What the heck is a parallax anyway?

Paul Annett of Clearleft does a far better job of explaining the css parallax technique than I could. If you’re unfamiliar with this layer-stacking technique, jog over to Vitamin and get the scoop.

That’s pretty cool, but why do I have to resize my browser to enjoy it?

For no practical reason whatsoever, I thought it would be cool to animate the layers in a CSS parallax and give the scene a depth of field that you can’t convey with static layers. As with all my jQuery endeavors so far, I found this surprisingly easier than I thought.

Step 1: Build the layered scene

Just in case you’re reading this and were served one of the other parallax scenes on the site, here’s a look at the finished product.


Locomotivation.com header


For our simple western landscape, we’ll construct the scene from four layers:

  1. poles.png Through the magic of repeat-x, a single telephone pole with power lines becomes a never-ending array of energy delivery
  2. logo.png Adding the logo to the scene creates an even greater illusion of depth. The slight gradient also conveys depth as items further in the distance have more light
  3. windmill.png A lone windmill is set off in the distance
  4. mountains.png Just like our telephone pole, this mountain range goes to the end of the earth
  5. sky.png Finally, that pretty blue sky is a tiny image only one pixel wide, repeating on the x-axis


CSS Parallax diagram


Step 2: Add the required Javascript references

To animate our parallax we’ll use my jQuery Parallax plugin which requires jQuery 1.2.x and the jQuery Easing plugin (for acceleration and deceleration).


<code class='html'>&lt;script src="/javascripts/theme/jquery-1.2.6.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="/javascripts/theme/jquery.easing.1.3.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="/javascripts/theme/jquery.parallax.js" type="text/javascript"&gt;&lt;/script&gt;


Step 3: Wire up the parallaxes (what a fun word to say!)

Now it’s time to attach our parallax behavior to the container and each slice in our scene.

jQuery Parallax diagram


<code class='html'>jQuery(document).ready(function() {

    jQuery("#header").parallax("create");
    jQuery(".scene-1 .slice-1").parallaxSlice("create", {speed: 5});
    jQuery(".scene-1 .slice-2").parallaxSlice("create", {speed: 3});
    jQuery(".scene-1 .slice-3").parallaxSlice("create", {speed: 1});

});


Step 4: Sit back and enjoy the show!

Again, this little demo has very little practical value. Maybe I should do something more constructive with it like, recreate the first level of Contra