Parallax scrolling is a relatively new trend in web design. With this effect, you can create an illusion of depth on your webpage. Parallax works by making the background of the webpage scroll at a slower speed that the foreground, thus giving the scene a perceived depth.
So how do we do this? Well, it's quite simple really. Whenever a users scrolls on the page, we'll calculate how much the page has been scrolled. We'll then scale down this 'scroll-height' and move the background image up or down accordingly.
Here's the result we wish to achieve:
Don't worry though, this is just a gif image. The actual result is completely smooth.
On with it, then. First, we'll need some markup.
<div class="background">
<div class="content">
<p>Hi, this is some content!</p>
<p>Parallax is awesome!</p>
</div>
</div>
Simple, isn't it? We have an external div for the background and an internal div for the content.
Now, let's add some CSS. I'll explain it in a bit. I'm using a stock image as a background.
div.background {
background: url('bg.jpg') center 0 no-repeat fixed;
height: 1000px;
position: relative;
-webkit-box-shadow: 0 0 20px #333;
box-shadow: 0 0 20px #333;
}
div.content {
font-family: Georgia, serif;
position: absolute;
height: 500px;
text-align: center;
width: 100%;
top: 30%;
font-size:40px;
}
First, we've added a background to the outer div. Then, we've set a height for it so that we may have some scroll room. We've also positioned it relatively so that we may shift it up and down with jQuery. Then, we added some box shadows to make it look pretty.
For the content div, the CSS positions the content in the middle of the page and lifts the content from the page (see what absolute positioning does to an element).
We're almost there. Now for the important part - the jQuery.
$(document).ready(function(){
var $win = $(window);
$('div.background').each(function(){
var scroll_speed = 10;
var $this = $(this);
$(window).scroll(function() {
var bgScroll = -(($win.scrollTop() - $this.offset().top)/ scroll_speed);
var bgPosition = 'center '+ bgScroll + 'px';
$this.css({ backgroundPosition: bgPosition });
});
});
});
The code is fairly easy to understand. We've used the jQuery's each method here so that we can add any number of class="background" sections. Every time the user scrolls, the innermost function is called. In this function, we're calculating how many pixels the page has scrolled yet. Then, we're scaling that down by a factor of 10 (this scale factor is stored in the variable scroll_speed) and then we position the background image to the new, scaled position. And voila! The parallax works!
In this tutorial, we've only added a single parallax background. If you want, you can add more sections quite easily. Here's an example of what the HTML might look like:
<!--section 1-->
<div class="background">
<div class="content">
<p>Hi, this is some content!</p>
<p>Parallax is awesome!</p>
</div>
</div>
<!--section 2-->
<div class="background">
<div class="content">
<p>The second section!!</p>
<p>More parallax!</p>
</div>
</div>
<!--section 3-->
<div class="background">
<div class="content">
<p>We can add as many sections as we want!</p>
</div>
</div>
The CSS and JS are the same and it'll still work though you will probably want to have different background images for different sections.
We'll end with this tutorial with a gentle reminder that this is just the most basic type of parallax effect. There are several more interesting effects that can be created by layering the parallax layers, each moving at a different speed. For more interesting effects, you can check out http://prinzhorn.github.io/skrollr/ any time. It's got some really interesting effects that you might like.
Finally, I've made a sample webpage with this effect, complete with multiple sections. Here's the github repository: https://github.com/prasoon2211/parallax-tutorial
That's it folks. Let me know if you have any questions.