Create Background Scrolling Effect with jQuery

Written by Kevin Liew on 23 Mar 2010
212,913 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
Nick 12 years ago
This is very nice! I'm not experienced with Javascript or jQuery, but would it be simple to implement an ON / OFF button for the scroll in case CPU load was too high?
Reply
Hank 12 years ago
Hi, am really new to this
so i dunno where should i put these code, i mean copy them to which file? style.css ??? i wanna put them to my wordpress.
Thans!!!
Reply
Hank 12 years ago
Please, how to use on my homepage only? in .css? and how? please
Btw, all my template files are .php, i don't know where should i put the "plugin" codes to?
Thank you!
Reply
Ha 12 years ago
Please, how to use in this wordpress theme:
http://wordpress.org/extend/themes/ari
Cuz it all use the .php
Reply
Hank 12 years ago
Okay, i've added to my blog.
It's great. Thank you.
BTW, can i make it activated on my homepage only?
How?
Reply
Kevin Liew Admin 12 years ago
If you want homepage only, there are 3 ways to do it:

1. you can include the javascript in homepage only,
2. Use php condition, if it's homepage, echo out the javascript.
3.or looking for a class that's unique to the homepage and add the parent class to here:
$('div.clouds'), should look something like $('body.home div.clouds')
Reply
Seema Morajkar - Indian 12 years ago
Hi,
Thanks for time to time sharing your tutorial. I am looking for complete website preloader. Infact I found that but it is not like your tutorial simple and sweet. Can you please share the same with us?
Waiting for your reply.
Thanks
Reply
Sandi Mac 12 years ago
How can I make the image scroll to the left once only, and then stop? I don't want it to auto-scroll, just scroll by one time and then stop.
Reply
amrabdelaziz 12 years ago
thnx so much :D
Reply
E P 12 years ago
Hi there,

Don't know if you still maintain this and/or will see this but I was just wondering how to get different elements to go different speeds?

Been trying to change it myself but to no avail!

Thanks,
E
Reply
Kevin Liew Admin 12 years ago
Hi E P, If you use the plugin, you can change the scroll speed:
scrollSpeed:10
like this:
$('.clouds1').bgscroll({scrollSpeed:10 , direction:'h' });
Reply
Andrea 12 years ago
Thanks a lot!!!!Have used this for my site!! Yuo rock!!! ....www.threeenergy.it...tell me if you like it!! :)
Reply
mulus 11 years ago
I use this script on my site (www.meliskent1.com) and it works fine for me but on iphone it crashes the explorer
Reply
Tiago Leal 11 years ago
How do I make it on wordpress? I want do use in my background site.
Reply
Kieu 10 years ago
Thank you for the tutorial. I was wondering how I would be able to only have the image scroll vertically halfway and stop. I don't want the image to repeat, and I don't want it to disappear off the screen either.

Thanks,
Kieu
Reply