Using jQuery To Create Parallax Scrolling Backgrounds

Just a quick demonstration today on using JavaScript and CSS techniques to create scrolling backgrounds. Here we layer backgrounds on top of each other and change their horizontal position to move them past the viewing area. It also uses different multipliers to move the closer objects quicker, and create a parallax effect.

After you’ve checked out the parallax scrolling demo you can head back here to see how it’s written up.

I used jQuery for rapid prototyping, but naturally you can use regular JavaScript if you know the tricks to do so.

The Styles

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#landscape, #grass, #verge, #window{
width:460px;
height:332px;
background-repeat:repeat-x;
background-position:0px 100%;
}
#landscape{
background-image:url('landscape.jpg');
}
#grass{
background-image:url('grass.png');
}
#verge{
background-image:url('verge.png');
}
#window{
background-image:url('window.png');
}

The first section sets height, width, background position and background repeat of the <div> elements that hold our backgrounds.

The other ID-specific sections set the background image you want to use for each part.

All CSS can be tweaked to suit your own project or how you see fit.

The Structure

1
2
3
4
5
6
7
<div id="landscape">
	<div id="grass">
        <div id="verge">
            <div id="window"></div>
        </div>
    </div>
</div>

All just divs inside divs here. Now, the interesting part.


The Scripts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
	var xAdd = 0;
	var scrollInterval = setInterval(function(){
		xAdd++;
		if(xAdd >= 920){
			xAdd = 0;
		}
		$('#landscape').css('background-position',xAdd + 'px 100%');
		$('#grass').css('background-position',(xAdd * 2) + 'px 100%');
		$('#verge').css('background-position',(xAdd * 3) + 'px 100%');
	},10);
});
</script>

First line imports our jQuery file and does the usual running of it in the next script tag.

We then set xAdd = 0 – this will act as a counter to add to each background’s x-position and move the backgrounds horizontally behind the window.

Use the scrollInterval variable and setInterval method to set a function that calls every 10ms here. It’s a type of timer that will increment our xAdd every time it is called (10ms).

The if statement is a sort of garbage collector, resetting our number to 0 if it’s more than or equal to 920 (the maximum width of our images). It won’t break if you remove it, but it stops the number becoming unnecessarily high. Always good to keep these things in mind while you code.

The following three lines with the $ signs at the beginning allow jQuery to select our three div elements with the backgrounds in them. It then uses the .css() method to change their background position and creates the scrolling effect you see, since this is called every time the interval is run. There are also some multipliers on the xAdd variable in each one as mentioned earlier to speed up the closest objects.

So yeah, have fun with it. Just a little idea I had. Perhaps you can make better use of it than a simulation of a train journey daydream.

I dunno, surprise me. Let’s see what can be made of parallax scrolling in web pages. Interested to try this in a page header…


25 thoughts on “Using jQuery To Create Parallax Scrolling Backgrounds

  1. I want to move the background image on my website (http://brijux.com) to scroll slowly compared to the main webpage. This will give the same parallax effect.

    How can I change your code to make it for vertical scrolling?

    Please reply in easy terms as I am not full-time web designer

    1. Sadly, this reply is a little late. But if you’re still wondering how, simply reorder this part:

      $(‘#landscape’).css(‘background-position’,xAdd + ‘px 100%’);

      to look like this…

      $(‘#landscape’).css(‘background-position’,’100% ‘ + xAdd + ‘px’);

      All the best.
      Michael

    1. Quite a difficult one to explain in short terms. I think you’re looking to find the scrollHeight in JavaScript, divide that by the pageYOffset, multiply that by your image’s height, and make that your background position.

      Hope this helps. Otherwise, it’s always an idea for another tutorial :)

      1. what does that mean? scrollHeight (actually want to do scrollWidth) divided by pageXOffset, multiply image width. But can you be more specific what scrollWidth means and pageXOffset means. And does that mean you change the 10 to that number?

        Thanks in advance,
        YoonMi

        1. document.scrollWidth tells you the full width of the page.

          window.pageXOffset is the current position of the user’s horizontal scrollbar.

          You have to take out the timer entirely and only update when the scrollbar is moved.

      2. This is great! I’m new and learning in the jquery and css world. Do you think you could email me so I can ask you a few questions about how this particular set of code works? It would help me a lot!!

  2. Hi, I just found out this piece of code and I love it but i’ve being trying to make the divs move slower and I can’t find the way to do it. Could you help me please?

    1. Certainly. All you do is change the number 10 to something higher.

      The second parameter in setInterval will be the length of time (in milliseconds) that the script pauses before it runs the function given in the first parameter. Increasing this will decrease the number of updates per second and slow down the animation.

  3. It’s simply brilliant! A few lines of code and the effect is just spectacular. I must use it somewhere. Thank you very much, Stephen!

  4. Hi, is one of the best and simplest effects that I had seen online. It has great possibilities. But, I have some questions:

    Is it possible to use this resource in html5?

    Can I insert a position static, but animated html5 menu bar into the images divs? If yes, How can I do it?

    Thank you

Comments are closed.