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…