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.
For our simple western landscape, we’ll construct the scene from four layers:
-
poles.png Through the magic of
repeat-x, a single telephone pole with power lines becomes a never-ending array of energy delivery - 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
- windmill.png A lone windmill is set off in the distance
- mountains.png Just like our telephone pole, this mountain range goes to the end of the earth
- sky.png Finally, that pretty blue sky is a tiny image only one pixel wide, repeating on the x-axis
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).
<script src="/javascripts/theme/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="/javascripts/theme/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="/javascripts/theme/jquery.parallax.js" type="text/javascript"></script>
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(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
