Floating Clouds, It's All Just Floating Clouds (Making a Background Image Scroll with jQuery)

This one comes from a post by fellow blogger MOPVHS, jQuery(Making a background image scroll. It looked pretty nice, so I started tinkering with it. Floating clouds, these are floating clouds, take a look:

The clouds in the background are drifting, so these really are floating clouds. Now, straight to the point: first find a background. I ripped mine off some theme. Put it in the images folder in your theme directory. First you need to load the jQuery library, then load this jQuery effect. The code is below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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;
  }

  $('#clouds').css("background-position",current+"px 0");
}

var init = setInterval("scrollBg()", scrollSpeed);

Next, add this CSS to your theme’s style.css:

1

#clouds { background:url('images/clouds_header.jpg') repeat-x scroll 0 0 transparent; width:100%; }

Then in the header, right after the body tag, add

1

<div id="clouds">

Then in the footer, right before the closing body tag, add

1

</div>