This tutorial will show you how to create a cool Parallax Website Header using jQuery and the jParallax jQuery plugin. This is quite a simple experiment and you won’t need any javascript knowledge, just plain old HTML and CSS. However this has the potential to create some really stunning effects.

The Files

So first of all we will need some javascript files:

There I told you this was simple. Next…

The Images

Before we do anymore its a good idea to create the images we will use in our header. You can have as many layers as you want but in this example we will use four images:

  • Sky
  • Sun
  • Grass
  • Tree

If you don’t know what I’m on about (or you don’t know what the Parallax effect is) have a look at this wikipedia article and you’ll see what I mean. So once we have our images then lets do some HTMLing.

The HTML

The HTML is where most of the work is done. I tell a bit of a lie here because most of the work is done by jParallax, but it is done automatically so we don’t really need to worry about it. So the HTML should look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.jparallax.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<title>Parallax Website Header</title>
<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery('#parallax').jparallax({});
});
</script>
</head>
<body>
 
<div id="parallax">
	<div style="width: 700px; height: 300px;">
		<img alt="" src="images/0_day.png"/>
	</div>
	<div style="width: 750px; height: 280px;">
		<img style="position:absolute; top:0px; left:350px;" alt="" src="images/1_sun.png"/>
	</div>
	<div style="width: 700px; height: 250px;">
		<img style="position:absolute; top:200px; left:0px;" alt="" src="images/2_grass.png"/>
	</div>
	<div style="width: 900px; height: 260px;">
		<img style="position:absolute; top:100px; left:150px;" alt="" src="images/3_tree.png"/>
	</div>
	<div style="width: 900px; height: 260px;">
		<img style="position:absolute; top:100px; right:150px;" alt="" src="images/3_tree.png"/>
	</div>
	<div style="width: 800px; height: 250px;">
		<h1 style="position:absolute; top:100px; right:355px;">My Site</h1>
	</div>
</div>
 
</body>
</html>

Pretty simple yeh? So what’s happening here.

  • First off we include our javascript files that we downloaded. Remember to include the jParallax file after the jQuery file.
  • Then we call our only bit of javascript. Just one function that initializes the jParallax on a specified div (in this case #parallax). Note you can pass in options here but we are just going to keep it simple and use the default options.
  • Inside our parallax div we specify our layers. In this case each layer is a div but it could be a li or just an img. The important thing to note is the styles of the images and divs. This is what controls the feel of the parallax when it is active. Unfortunately there is no set scheme to calculate the sizes. Just play around with them until you get something that looks good.

And that’s that really. Obviously in this example we have put in some text as an example but anything could go inside the divs. Be creative.

The CSS

The CSS is almost too simple to mention but I will anyway. All we need to do is define the styles for #parallax.

#parallax {
	background:#ccc; 
	position:absolute; 
	overflow:hidden;
	width:700px; 
	height:300px; 
}

Important things to remeber about the CSS are:

  • Height and width for each child must be explicitly set via CSS. jParallax also automatically gives each child position:absolute in order to start moving them around, so there’s no need to set it manually.
  • The parallaxed element itself needs to have position:relative or position:absolute specified or the children will move relative to the document rather than the viewport!

Conclusion

So there you have it. A simple parallax website header. This example is relatively simple but if you use your imagination I’m sure you could come up with some cool ideas. If you do why not tell us about them in the comments below.

View the Demo Download the ZIP file

Related Posts

More?

If you enjoyed this post, please consider promoting it.
  • Digg
  • del.icio.us
  • StumbleUpon
  • Design Float
  • Reddit
  • Mixx
  • Technorati

Remeber to subscribe to the feed and get future articles delivered to your feed reader.

If you want to discuss this tutorial or any other thoughts you have then you can do so over on our fourm.

Comments

  1. Comment by Yuri on September 14, 2008 1:10 pm

    Is there something similar for using with Prototype.js?

  2. nice tutorial. crisp and clear… thanks for sharing it.

    Crazyrahul84 | Designer | Iexplorehere

  3. [...] recorded first by BTal on 2008-12-26→ Create a Parallax Website Header [...]

  4. wow..it works… :D i’ll use it on my site…soon..thanks

  5. I’ll try it soon…

    tonight I will try to apply to my header blog..

    hope that it’ll works!

  6. wow, it works for my blog… OMG.. thankyu so much for giving me this article…

    after trying and error, finally I’ve got it!

  7. @ndop No probs. Glad it worked for you.

  8. [...] after I heard javascript. You know that I don’t have programmer background. But, when I visit that link. Actually was not difficult as I [...]

Leave a Comment

(required)

(required)