Getting ready
In this tutorial, we are going to create a simple layout for a website, which includes a very cool animated background. Here is how the final result will look:
As you can see, in this example I have used the Twitter background clouds, which look really nice.
This tutorial has been inspired by the one called How To Build an Animated Header in jQuery that I definitely recommend you go check out.
Let’s do it
1. The first step of this tutorial is to download our background image. I have used this one from Twitter, but of course feel free to use any other image you’d like.
2. Once finished, let’s create a a file called index.html. In order to get started with the basic HTML structure, paste the following code in your file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Animated background Image</title> </head> <body> </body> </html>
3. Now, let’s define our document structure. Since we want to do a simple layout, we’ll only need to create a header and content area. Paste the following within the <body> and </body> tags:
<div id="container"> <div id="header"> <h1>Animated Background Image</h1> </div><!-- #header --> <div id="content"> <!-- Your content will go here --> </div><!-- #content --> </div><!-- #container -->
4. Well done! We already have our XHTML. Now, what we have to do is obviously use some CSS and give style to our document.
To do so, copy the code below and paste it within the <head> and <head> tags of the index.html file.
<style type="text/css" media="screen">
body{
background-color: #C0DEED;
margin:0;
padding:0;
}
#header{
height:180px;
background: #8EC1DA url(bg-clouds.png) repeat-y scroll left top;
text-align:center;
margin-top:-30px;
}
#header h1{
padding-top:35px;
font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
color:white;
font-size:45px;
}
#content{
background-color:#fff;
height:500px;
width:980px;
margin:25px auto 0 auto;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
</style>5. At this point, you can save your work and take a look at the index.html page using your web browser. If everything is ok, your index.html page should look like the screenshot above, with fixed clouds, of course.
6. Now, it’s time to give life to the layout by using the power of jQuery. As you probably guessed it, what we have to do right now is include the library. Since Google hosts a version that you can use, there’s definitely no need to download a copy. Just use the one from Google.
To do so, paste the following line of code in your index.html file, after the closing </body> tag:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
7. Now that jQuery has been loaded, we can code a function to animate the background. Copy the code below and paste it on your index.html file, just after the line where you imported jQuery into the file.
<script type="text/javascript" charset="utf-8">
var scrollSpeed = 70;
var step = 1;
var current = 0;
var imageWidth = 2247;
var headerWidth = 800;
var restartPosition = -(imageWidth - headerWidth);
function scrollBg(){
current -= step;
if (current == restartPosition){
current = 0;
}
$('#header').css("background-position",current+"px 0");
}
var init = setInterval("scrollBg()", scrollSpeed);
</script>There’s nothing really hard with that code. First, we declare a set of variables to control the animation (image width, scroll speed, etc). Then, we created a function to automatically move the background. The most tricky part is to calculate when we need to reset the position. If you have a better idea about doing it, let me know in a comment! 
Demo & Download
I hope you enjoyed this tutorial and helps you to create very nice websites. If you want, you can see a Demo of this code, or you can Download the source files.
My name is Jean-Baptiste Jung and I'm the man behind Cats Who Code. I started to use the Internet back in 1998 and started to create websites three years laters in 2001.
52 Comments
Awesome tutorial! Just tweeted it.
Very nice little jQuery trick.
Great tutorial Jean, this is just another step towards flash dying.
The image doesnt get added until there is enough space for it so there is a gap every 20 seconds or so. See this screenshot:
http://screencast.com/t/MTZiMjNkO
Firefox 3.5
Looks very cool! I would just make it move slower, to make it less distracting.
Brilliant! this looks wicked! thanks for the tut.
This is sexy, for real.
Wes – I fixed it with changing var imageWidth = 2247; to var imageWidth = 1700; but I assume you could change the headerWidth also.
Does this have increased CPU usage because I tested it and it revved up my processor pretty good. Maybe it’s just me?
Nice tip, thanks for sharing on Twitter
Great, but is there very usefull to load jquery just for this animation?
It’s really easy to use default function and speed up the execution time (while not using jquery somewhere else ofc) of the script by changing line 73 into :
document.getElementById(’header’).style.backgroundPosition = current+’px 0′;
If you’re using Prototype or Mootools :
$(’header’).setStyle(”background-position”,current+”px 0″);
Great tutorial!
Currentry I’m working on the same approach for one of the project – and I’ve met at least two small problems, that was not covered in your tutorial (as for myself I have not found any optimal solution for them yet)…
1. When the cycle ends end animation restarts there is visible jump in image… When we dealing with vertiacal moving that easily could be fixed with the same pixel-set in the beginnig and in the end of animation that equal to the header height, but in the horizontal case it does not work because we don’t now the width of user’s window in this moment and this width is different for different users
2. In your case restart position is calculated assuming that the header width is 800px, but if user has screen resolution more than 800*600 – this put you in a trouble because the user will see the end of the picture moving on the screen before the animation restarts… so there we also meet the question about user’s screen width
probably further discussions will reveal some solutions
anyway thank you a lot for sharing this code
Thanks for this list
“var headerWidth = $(’html’).width();” will work with any screen resolutions, but headerWidth need to be updated inside script when user resize window.
F*%$ awesome man!!!
I wanna implement it someday :/
i’ll twit it right away
does NOT work. reaches the images end.
Can you tell me if we can use the twitter background on our projects?
By the way, you can determinate the screen resolution with: screen.width
You just need to put it like this: var headerWidth = screen.width;
There you go!
This needs to use clearInterval, doesn’t it? CPU runs to 100% the longer this runs. Anybody know how to do it?
That’s some nice jQuery!
i want to know if we can use the twitter background on our projects?
@jane : I don’t think you can since the example image I took comes from Twitter website.
too good! loved it! love jquery!
Could you please show me I would incorporate this into a wordpress site please?
hi don’t forget to check another inspiration at my web site click product and choose another design and after that choose my type…i have another animation for background just with jquery..i really like it..and i really like your web site name “catswhocode” ,thankyou..
Thanks for the tip. I think I’m going to use it for my site.
I’ll modify it and embedded it in the middle of the page.
Thanks.
Wow. Great one. I’ll definitely use this for my personal website.
don’t think you can since the example image I took comes from Twitter website.
This is pretty slick, thank you for sharing it.
To make the animation seamless could you use two exact images that rotate positions?
For example as image1 is halfway through it’s animation, image2 would append to the end of image1.
When image2 moves completely into the background space, image1 would append to the end of image2.
Well done! That’s a really useful tutorial.
I dont know much yet in jquery but this tutorial rocks!
Woww. Thank you so much Jean.
awesome tuts..thanks for share
Awesome trick – worked for me too..
any way to do it with a flash file ? maybe a negative z-index or something ?
Thanks alot for the neat trick. I am planning to do something similar with my personal site with some extra parameters. But this one saved me alot of coding time.
Wow, first time I saw an effect like this. I thought things like this are exclusive for flash websites only. I’m definitely exploring this trick. I just might incorporate it in some sites of mine. Thanks a lot.
Hmm, nice start but this needs some work.
At first I would make it go slower, which will make it less distracting. Then second, as mentioned before, it jumps when it reaches the end, so you should get the screen width and work with that value.
Third, some people say it gets their CPU really pumped up and that’s not what we want right.
Nice start!
Here’s my solution for the time being:
If you open the ‘bg-clouds.png” in Photoshop and tile the clouds to something like the width of 6741pixels and re-save it, it’s only a 100kb image still. Set the “var scrollSpeed = 70;” and you’re all set.
Now, the kick doesn’t come in for a looooong time
The very cool, thanks !
what amazing beautiful tutorial…, don’t need more flash for this animation
Thank you so much =)
Great tute, and nice code. Would love to see this with multiple depth, like parallax scrolling, so, back mid front.
Great blog, and thanks for sharing, Digging now =)
I just want to say that Cats are really good in writing codes “art of code” after what i read in this website; Gratz
Here’s a way to get around the end of image problem:
1. Use an image that can wrap horizontally.
2. Add to the background style “repeat-x”.
3. Update this line of code: “var restartPosition = -(imageWidth);”
It’s a cool effect, but still trying to figure out if I should use it or not.
Another useful article!
Jean-Baptiste, your whole blog is really great. Everytime I have a new idea, I keep coming back here and chances are you already covered it with a great tutorial.
Like this one.
Thanks.
Hey man, awesome tut.
I tried to modify it so it scrolls vertically, but then IE gives me an error (I don’t care about error itself, but it wont animate in IE) in Jquery.1.4.2.js, whether it’s hosted on google or by me… weird stuff.
here’s the code:
var scrollSpeed = 70;
var step = 1;
var current = 0;
var imageHeight = 458;
var headerHeight = 1000;
var restartPosition = -(imageHeight – headerHeight);
function scrollBg(){
current -= step;
if (current == restartPosition){
current = 0;
}
$(’#logo3′).css(”background-position”,”0″+current+”px”);
}
var init = setInterval(”scrollBg()”, scrollSpeed);
please help!!
(((
I used the vertical image animation and it works:
/* vertical animation */
var scrollSpeed = 300;
var step = 150;
var current = 0;
var imageHeight = 1350;
var headerHeight = 150;
var restartPosition = -(imageHeight);
function scrollBg(){
current -= step;
if (current == restartPosition){
current = 0;
}
$(’#animation’).css(”background-position”,”0 “+current+”px”);
}
var init = setInterval(”scrollBg()”, scrollSpeed);
How do you make the background go to the right vs. left?
OK NVM I did it!11
I just copied code again and after careful analysis it seems that I had deleted empty space after zero:
$(’#logo3′).css(”background-position”,”0″+current+”px”);
now it’s like:
$(’#logo3′).css(”background-position”,”0 “+current+”px”);
and it works.
I can’t believe how much SUCK IE contains, but ok.
sorry for useless posts.
great tut again, btw.
Wouldn’t be much easier like this?:
function scrollBar(){
$(’#header’).css(”background-position”,”0px 0px”).animate({backgroundPosition: “-2247px 0px”},4000,”linear”,scrollBar);
}
$(function(){
scrollBar();
});
Also, changing the background repeat to just “repeat” for it to repeat horizontaly as well.
Cheers
This is very inspiring. I’m learning a lot and realize just how far I have to go!
Another great tutorial. I like the Twitter background. I previewed the demo and it was great. Looking forward to some more tutorials from you.
Hi there,
Nice code!
Some changes to continuous move.
var imageWidth = 2247; // Background image width
var headerWidth = 1685; // How wide the header is.
I Hope helped someone
Bye
Nice trick!!! Unfortunately the demo links are broken or not found…
15 Trackbacks
[...] Animated background image with jQuery Share and Enjoy: [...]
[...] Enlace | Cats Who Code [...]
[...] ulaşacağımız tekniğin nasıl yapıldığını öğrenmek, kaynak kodlara ulaşmak için de şuraya uğramak yeterlidir. Kesinlikle arşive alınması gereken bir döküman olduğu için buraya yazma [...]
[...] Animated background image with jQuery [...]
[...] Animated background image with jQuery If you’re used to work with the jQuery library, there’s no doubt that you know how powerful it is. In this tutorial, we are going to create a basic web page layout which include a super cool animated background image, using jQuery. [...]
[...] 背景画åƒã‚’アニメーションã•ã›ã‚‹æ–¹æ³• [...]
[...] | Cats Who Code [...]
[...] le 26.nov, 2009, catégorie Ajax Si vous désiriez faire un fond animé sur votre site, alors ce tutoriel est pour vous. La démo est [...]
[...] Animated background image with jQuery – Cats Who Code – Nov ‘09 [...]
[...] Animated background image with jQuery – Cats Who Code – Nov ‘09 [...]
[...] Animated background image with jQuery (tags: background jquery effect header) [...]
[...] ulaşacağımız tekniğin nasıl yapıldığını öğrenmek, kaynak kodlara ulaşmak için de şuraya uğramak yeterlidir. If you enjoyed this article please consider sharing [...]
[...] CatWhoCode Bookmark : del.icio.us | Reddit | Slashdot | Digg [...]
[...] 10. Animated Background Image (another!) [...]
[...] 1. Animated background image with jQuery [...]