Slide Clouds Background

User Rating: / 0
PoorBest 

Hi, in this tutorial you havea very simple and nice clouds effect. There is about clouds which move horizontally. You have a png image with transparent background which you can edit and change density of th clouds.

Create a new html page, and in the head section copy this code:

<link rel="stylesheet" type="text/css" href=".css"/>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
 // speed in milliseconds
var scrollSpeed = 70;
// set the default position
var current = 0;
// set the direction
var direction = 'h';

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
 setInterval("bgscroll()", scrollSpeed);   
   
</script>
   
<style type="text/css">
body {background:#fff;
margin:0;
padding:0;   
}
   
.clouds {background:#3e83c8 url(images/bg_clouds.png) repeat-x 0 bottom; width:100%; height:100%; margin:0; border:0px; position:absolute;}
</style>

In the body tag insert the clouds div:

<div class="clouds"></div>

The last step is to download the jQuery plugin, that was all, bye!