Welcome to the awesome Cloud effect Javascript and CSS tutorial. Check out what it looks like in action here: www.nichesnowboards.com. We can all thank Ben for making me do this. Thank you Ben, xoxoxoxo.

This tutorial uses the jquery framework. If you don’t know what that is than read up my little one, read up.

In your html header you need to call all three documents that you’ll need:

CSS

{code type=css}

{/code}

After that you’ll need to put in the css divs into your html document:

HTML

{code type=html}

{/code}

After that you’ll need to put in the javascript calls:

Javascript

{code type=js}
var cloudMoved = false;
var cloud2Moved = false;
var cloud3Moved = false;

$(init);

function init()
{
cloudMove();
cloud2Move();
cloud3Move();
}

function cloudMove()
{
if (!cloudMoved)
{
$(“#cloud”)
.css(“left”, $(“#cloud”).offset().left)
}

$(“#cloud”)
.animate(
{
left: $(“#sky”).width()
},
cloudMoved ? 180000 : 150000,
“linear”,
function()
{
$(this)
.css(“left”, -parseInt($(this).css(“width”)))
cloudMoved = true;
cloudMove();
}
)
}

function cloud2Move()
{
if (!cloud2Moved)
{
$(“#cloud2″)
.css(“left”, $(“#cloud2″).offset().left)
}
$(“#cloud2″)
.animate(
{
left: $(“#sky”).width()
},
cloud2Moved ? 120000 : 60000,
“linear”,
function()
{
$(this)
.css(“left”, -parseInt($(this).css(“width”)))
cloud2Moved = true;
cloud2Move();
}
)
}

function cloud3Move()
{
if (!cloud3Moved)
{
$(“#cloud3″)
.css(“left”, $(“#cloud3″).offset().left)
}
$(“#cloud3″)
.animate(
{
left: $(“#sky”).width()
},
cloud3Moved ? 400000 : 150000,
“linear”,
function()
{
$(this)
.css(“left”, -parseInt($(this).css(“width”)))
cloud3Moved = true;
cloud3Move();
}
)
}
{/code}

And now you are good to go!

Download these files here. You’re welcome.