Create Background Scrolling Effect with jQuery

Written by Kevin Liew on 23 Mar 2010
201,927 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
ben smithson 11 years ago
Cool effect. I filled up my screen and my browser got all flicker-y. I can think of fun uses for this effect - thanks for sharing!!
Reply
Ricardo Zea 11 years ago
This is a very interesting plugin.

However, you need to check this other one out, it's called 'Spritely': www.spritely.net
Reply
WSQ 11 years ago
Quite interesting post, although it may be a little bit simple, but it shows the method and scripts of using such jQuery effects.
Reply
fiona 11 years ago
it doesn't work even i have copied all parts :( and pasted in html empty file.
image i replaced with one from my root
where i made mistake ?
Reply
fiona 11 years ago
i apologize...dowmloded files work excellent!

great, thanks!
Reply
rory 11 years ago
That looks really cool perfect for a website I'm doing at the minute. Think I'll have the whole site background moving, if thats possible. Would the site slow down much if I made it massive?
Reply
kevin Admin 11 years ago
Hi, I actually have a sample website that using it... it's called http://www.eggracer.com.au

have a look, it might lag a bit sometimes... but you see, it has a jquery image slider in it... otherwise, it will look quite smooth! :)
Reply
Beben 11 years ago
its a great...and so smooth too if we change direction to "v"
thanks ^^
Reply
Ryan Cowles 11 years ago
I've seen the effect plenty of times, but have yet to try it myself. I think I might have to!
Reply
PrOscarHome 11 years ago
Great tips!
Reply
Jess 11 years ago
Thank you thank you thank you! That was driving me nuts how to figure out and your method is so simple and easy to use!
Reply
Scrapsforever 11 years ago
Its realy nice one I am always searching
jquery tutorials .Your tutorials is really useful for us to learn somthing new
Reply
2web 11 years ago
thanks. useful
Reply