Create Background Scrolling Effect with jQuery

Written by Kevin Liew on 23 Mar 2010
212,911 Views • Tutorials

Introduction

Greeting, today we are going to make a scrolling background effect. This script will move the background of any html tag, either vertically or horizontally. I used this script in one of my project which has a blue sky with clouds and it makes the whole website came alive. I think that's pretty impressive.

In this tutorial, we're not only go through how to make it, we will have it in plugin as well which allow user to customize the speed of the movement and direction (vertically, horizontally and diagonally). Alright, the concept behind this animation is really simple. We will use the background-position attribute to move the background, very easy right?

1. HTML

There is nothing about HTML. Basically we will put the background image in the cloud div and animate the background image.

	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Scrolling Backgorund</title>
<div class="clouds">

		</div>
	

2. CSS

I think, from all of my tutorial, this would be the shortest and simplest CSS code.

body {
	margin:0;
	padding:0;
	background:#fff; 	
}

.clouds {
	width:300px; 
	height:300px; 
	margin:10px; 
	border:2px solid #ccc;
	background:#3e83c8 url(images/bg_clouds.png) repeat-x 0 bottom; 
}

3. Javascript

Alright, this is the part that makes everything alive! We will make it more configurable. We can adjust the speed and the direction. Of course, to make sure you understand what it does, I have put comments in each line of code.

$(document).ready(function () {
    // speed in milliseconds
	var scrollSpeed = 70;

	// set the direction
	var direction = 'h';

	// set the default position
	var current = 0;

	function bgscroll(){

    	// 1 pixel row at a time
	    current -= 1;
   
	    // move the background with backgrond-position css properties
	    $('div.clouds').css("backgroundPosition", (direction == 'h') ? current+"px 0" : "0 " + current+"px");
   
	}

	//Calls the scrolling function repeatedly
	var init = setInterval("bgscroll()", scrollSpeed);	
});

4. The Plugin

I'm not an expert in creating plugins but thanks to my friend from web developer juice, with his amazing skill, he managed to convert the whole script in a very short time and here is the code. He has got some interesting tutorials and articles as well. Make sure you check out his website. :)

(function() {
	$.fn.bgscroll = $.fn.bgScroll = function( options ) {
		
		if( !this.length ) return this;
		if( !options ) options = {};
		if( !window.scrollElements ) window.scrollElements = {};
		
		for( var i = 0; i

Usage

So, this is how you use it. Make sure you've included jQuery framework and the bgscroll plugin. It accepts two properties:

  • scrollSpeed : speed of the movement
  • direction : direction can be either "v", "h" or "d" (vertical, horizontal or diagonal)
$( function() {
	$('.clouds1').bgscroll({scrollSpeed:10 , direction:'h' });
	$('.clouds2').bgscroll({direction:'d'});
});
Check out the Plugin in action

Conclusion

I hope the tutorial and plugin will be useful for you. If you really like this article and want to support me, please share it with your friends :) Thanks!

Demo 1Demo 2Download
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

43 comments
dipovespo 13 years ago
i see ur web http://www.eggracer.com.au , that so nice,
but in my browser its look not smooth, maybe the file size is too big?
Reply
Habib Hadi 13 years ago
just added it to my site http://habibhadi.com

Its works like charm...thanks.
Reply
tewodros zewdu 13 years ago
wow!
Reply
rob 13 years ago
why is the scrolling speed dependent on the size of the browser window,, if i make my browser smaller my scrolls are faster??
Reply
woiweb 13 years ago
It's fun,good idea
Reply
Jermaine 13 years ago
Plugin works perfectly! I tweaked the script slightly so that users can animate towards the left as well as the right. Details are on my blog:

http://www.graphicbeacon.com/?p=948

Thanks again for this solution.
Reply
Allison 13 years ago
Wonderful & easy to implement! Thanks so much!
Reply
k 12 years ago
It's not working on my site, can anyone tell me what's wrong? I've applied everything mentioned above. The only difference is that I'm applying it to a body ID instead of a div tag. In place of div.name I have body#name. Thanks for any help.
Reply
k 12 years ago
Never mind my previous comment - just fixed a minor syntax error and it worked!. :)
Reply
Paul 12 years ago
If anyone's interested, I needed the vertical scroll to go the other way. After some tinkering, the way to do it is to open the jquery.bgscroll.js file. In the line that starts with eval( 'window... - you can see there's an e.current value of 1. Change it to -1 and it'll scroll in the opposite direction.
Reply
Neil Livingstone 11 years ago
IF you use this method to reverse the direction please be sure to change the css for .clouds1 , .clouds2, .clouds3. In the downloaded example it sets the background-image to repeat-x, change it to just repeat. Without changing this the vertical and horizontal examples will not repeat the background-image more the once. Thanks paul for the above solution, it helped me immensely!
Reply
idris 12 years ago
this is really useful for my web design
Reply
Josh Bedo 12 years ago
Anybody having problems when scrolling the page? It seems to speed up the scrolling for me.
Reply
Dana 12 years ago
I'm trying to get this to work vertically as a long background that slowly moves upward but can't figure out how to do it; I may have CSS conflicts. Can you explain how to do a vertical move? I changed "h" to "v" and matched my div name, etc. but haven't been able to get it to work... any pointers? Thanks!
Reply
Kevin Liew Admin 12 years ago
it's working fine. Download the demo and open index2.html, there is a vertical version in there.
Reply