Download Demo

What we’ll be looking at

  • The 3D Parallax Effect, an effect that adds depth to a container by providing different layers.
  • These layers will move at a different rate from each other
  • We can add various options to these layers to make them move at different rates, and to change the effect

The Introduction

You’ve probably heard of the 3D parallax effect used by Walt Disney to create some of his classic cartoons, or more recently by websites such as Silverback. Hopefully we’ll be able to recreate this kind of effect.

Speaking simply, what we want to accomplish then is for some elements to scroll at a different rate from other elements. This can be accomplished through a combination of both Javascript (jQuery in this case) and CSS. We’re going to be using a plugin written by Steph Band.

3D Ahoy

First of all we need to include the jQuery file, jquery.parallax.js and the jquery.event.frame.js file in the head of your document. You can find these files at the plugin link provided above.


<script type="text/javascript" src="jquery.js"></script><
script type="text/javascript" src="jquery.event.js"></script>
<script type="text/javascript" src="jquery.parallax.js"></script>

The parallax plugin selects a div and turns each of the children in the div into layers which can have their rate of movement changed through options. Make a new Javascript file, and do the following, or alternatively add this to the head of your document.

<script type="text/javascript">
 $(document).ready(function(){ 	
     
     	$('#parallax img').parallax({}, { yparallax: "false" }, {}, {}, { yparallax: "false" }); 
  
  });
</script>

We have to target the layers in the #parallax div with the parallax function. There are a bunch of settings you can have (some of which I’ve added above to make parallax not work along the y-axis, as it causes all sorts of trouble in this example). You can play around with these options until you get the right effect. You can learn more about these settings here.

Then in the body of your HTML you should have a div with the id ‘parallax’ contained all the images you wish to convert to layers. You can also use something like a few <span>s, assuming you target them with the jQuery function. Here’s the example I’ll be going with today:


<div id="parallax">

	<img class="clouds" src="clouds.png" alt="" style="width:700px; height:242px;" />
	<img class="mountains" src="mountains.png" alt="" style="width:700px; height:251px;" />
	<img class="text" src="text.png" alt="" style="width:700px; height:333px;" />
	<img class="trees" src="trees.png" alt="" style="width:700px; height:297px;" />
	
</div>

You can find each of these images at the following links: mountains.png, clouds.png, text.png, trees.png. If you’re looking to do this example with me, then put all of these images in the same directory as your parallax code.

Don’t forget, for this to work you have to define a width and height of the images as I have above! Now all we have to do is add a quick bit of CSS making the #parallax div relative in position and defining its width and height. You also need to make the #parallax images positioned absolutely. I’ve also added a few more positioning attributes to the individual image layers, to make everything look right. If you decide to do your own example, your CSS might be very different!



#parallax {
	background: #000;
	margin: 1.5em 0px;
	overflow: hidden;
	position: relative;
	width: 550px;
	height: 307px;
}

#parallax img {
	position: absolute;
}

.trees { position: relative; top: 40px; }
.mountains { position: relative; top: 55px; }


Full Code of Parallax

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Parallax Demo</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script src="jquery.event.js"></script>
<script src="parallax.js"></script>

<script type="text/javascript">

$(document).ready(function(){
	$('#parallax img').parallax({}, { yparallax: "false" }, {}, {}, { yparallax: "false" }); 
});

// Declare parallax on layers

</script>


<style type="text/css">

#parallax {
	background: #000;
	margin: 1.5em 0px;
	overflow: hidden;
	position: relative;
	width: 550px;
	height: 307px;
}

#parallax img {
	position: absolute;
}

.trees { position: relative; top: 40px; }
.mountains { position: relative; top: 55px; }


</style>

</head>

<body>

<div id="parallax">

	<img class="clouds" src="clouds.png" alt="" style="width:700px; height:242px;" />
	<img class="mountains" src="mountains.png" alt="" style="width:700px; height:251px;" />
	<img class="text" src="text.png" alt="" style="width:700px; height:333px;" />
	<img class="trees" src="trees.png" alt="" style="width:700px; height:297px;" />
	
</div>



</body>
</html>

Finishing Points

  • For this to work on an image like the preview I’ve linked to below, you need png transparency. Unfortunately, Internet Explorer 6/7 and 8 don’t support full png transparency. To fix this problem you can insert a pngfix file, which you can find here
  • Don’t forget to mess around with image sizes if things dont work out perfectly straight away.
  • Don’t add parallax to everything! It will slow down your website, and you don’t want that.
  • These images are pretty big! On a production website you might want to look into solutions such as png compression