Create Parallax Scrolling using jQuery

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. This is similar to the idea that when you are moving, objects nearer to you move at slower speeds- hence, the background appears to be behind the foreground.

So, how do we achieve this effect? Well, it’s quite simple really. Whenever a users scrolls on the page, we calculate how much the page has been scrolled. We then scale down this scroll-height and move the background image up or down accordingly. Here’s the result we wish to achieve.

Parallax1

Don’t worry though, this is just a gif image. The actual result is completely smooth. Let’s get started then. First, we’ll need some markup.

The HTML

<div class="background">
    <div class="content">
        <p>Hi, this is some content!</p>
        <p>Parallax is awesome!</p>
    </div>
</div>

We have an external div for the background and an internal div for the content. The external div will move slower than the internal one.

Now, let’s add some CSS. I’ll explain it in a bit. I’m using a stock image as a background.

The CSS

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.

The JavaScript

$(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!

Adding more sections

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 JavaScript 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 the demo page of Scrollr, a plain JavaScript library. 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, complete with the code that I have used in this tutorial. A demo is also available on GitHub pages.

That’s it for now, folks. If you have any questions, let me know in the comments below!

Comments

  1. Thnx so much for this. I was looking for a simple parallax tutorial like this without having to use all these buggy plug-ins.

  2. Thanks for the tutorial! This is easily the simplest explanation I have found yet!

Speak Your Mind

*