Create Background Scrolling Effect with jQuery

Create Background Scrolling Effect with jQuery


Create Background Scrolling Effect with jQuery

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!

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

43 comments

ben smithson
Tue, 23rd March 2010
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
Tue, 23rd March 2010
This is a very interesting plugin.

However, you need to check this other one out, it's called 'Spritely': www.spritely.net Reply
WSQ
Tue, 23rd March 2010
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
Tue, 23rd March 2010
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
Tue, 23rd March 2010
i apologize...dowmloded files work excellent!

great, thanks! Reply
rory
Wed, 24th March 2010
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
Wed, 24th March 2010
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
Thu, 25th March 2010
its a great...and so smooth too if we change direction to "v"
thanks ^^ Reply
Ryan Cowles
Fri, 26th March 2010
I've seen the effect plenty of times, but have yet to try it myself. I think I might have to! Reply
PrOscarHome
Sat, 10th April 2010
Great tips! Reply
Jess
Fri, 6th August 2010
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
Fri, 10th September 2010
Its realy nice one I am always searching
jquery tutorials .Your tutorials is really useful for us to learn somthing new Reply
2web
Mon, 15th November 2010
thanks. useful Reply
dipovespo
Fri, 21st January 2011
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
Sun, 24th April 2011
just added it to my site http://habibhadi.com

Its works like charm...thanks. Reply
tewodros zewdu
Wed, 4th May 2011
wow! Reply
rob
Sun, 19th June 2011
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
Mon, 20th June 2011
It's fun,good idea Reply
Jermaine
Sat, 9th July 2011
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
Thu, 21st July 2011
Wonderful & easy to implement! Thanks so much! Reply
k
Mon, 3rd October 2011
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
Mon, 3rd October 2011
Never mind my previous comment - just fixed a minor syntax error and it worked!. :) Reply
Paul
Mon, 24th October 2011
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
Fri, 11th January 2013
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
Fri, 28th October 2011
this is really useful for my web design Reply
Josh Bedo
Wed, 2nd November 2011
Anybody having problems when scrolling the page? It seems to speed up the scrolling for me. Reply
Dana
Tue, 29th November 2011
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
Mon, 5th December 2011
it's working fine. Download the demo and open index2.html, there is a vertical version in there. Reply
Nick
Thu, 1st December 2011
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
Fri, 10th February 2012
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
Sat, 11th February 2012
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
Sun, 12th February 2012
Please, how to use in this wordpress theme:
http://wordpress.org/extend/themes/ari
Cuz it all use the .php
Reply
Hank
Sun, 12th February 2012
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
Sun, 12th February 2012
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
Mon, 20th February 2012
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
Tue, 21st February 2012
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
Tue, 20th March 2012
thnx so much :D Reply
E P
Tue, 24th April 2012
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
Wed, 13th June 2012
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
Sun, 24th June 2012
Thanks a lot!!!!Have used this for my site!! Yuo rock!!! ....www.threeenergy.it...tell me if you like it!! :) Reply
mulus
Mon, 29th October 2012
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
Thu, 27th June 2013
How do I make it on wordpress? I want do use in my background site. Reply
Kieu
Mon, 21st July 2014
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

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement