HomeDemo: How to Use jQuery Animation Effect to Move the Clouds in your Sky in 5 Steps
Share
In the last time we can see many funny web projects with jQuery using a lot of animation effects.
This effect becomes more and more popular to use as an alternative to adobe flash, btw.
Today i want to demonstrate you, how easy it could be implemented into your page or blog.
I will demonstrate it by using an existing example from a maintenance landing page of google wave.
some pp say “RT @jeresig: The most important part of Google Wave uses jQuery” ;)
it is an easy animation of ‘clouds in the sky’ moving from left to right ;), as we can see it everyday in nature, lol.
I try to keep it simple and explain only the necessary steps to make this animation effect working:
Step I: Including jQuery Framwork into your head section.
* without jQuery it will not work.
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
Step II: HTML Elements
* container and the moving elements.
<div id="sky">
<div id="cloud">
</div> <!-- END #cloud -->
<div id="cloud2">
</div> <!-- END #cloud2 -->
<div id="cloud3">
</div> <!-- END #cloud3 -->
</div> <!-- END #sky -->Step III: JAVASCRIPT. Please insert the code after the framework script.
* cloud functions move html elements by changing css position attributes.
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();
}
)
}
Step IV: The Basic CSS
* this will give the html-clouds-elements a position and a visible image.
#sky
{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 131px;
overflow: hidden;
}
#cloud
{
position: absolute;
left: 5%;
top: 15px;
z-index: 2;
width: 120px;
height: 91px;
background-image: url(../images/cloud.gif);
background-repeat: no-repeat;
}
#cloud2
{
position: absolute;
left: 25%;
top: 65px;
z-index: 3;
width: 101px;
height: 66px;
background-image: url(../images/cloud2.gif);
background-repeat: no-repeat;
}
#cloud3
{
position: absolute;
left: 50%;
top: 10px;
z-index: 1;
width: 496px;
height: 110px;
background-image: url(../images/cloud3.gif);
background-repeat: no-repeat;
}
Step V: Demo & Download Link
Here is the link to the demo page .
Tags: How-To, Inspiration, Javascript, Libraries
Subscribe to the Dailies
another cloud effect tutorial:
http://www.omerfarukzorlu.com/post/How-to-make-a-real-cloud-effects-with-jQuery.aspx
yep, nice ;)
Hi, AWESOME tutorial. Is there a way to “turn off” the clouds? Make them disappear totally from the page?
yes, there is a way.
How would you do that?
I’m looking at clicking a link or button and that would stop the clouds from moving and hide them. I figured out how to hide them I’m just looking at how you’d stop the clouds from moving. Any help would be appreciated.
I found the .stop() function for jquery and did this to try and just stop the first cloud:
Stop the cloud
Now in a perfect world that would work. But it didn’t… any idea what I’m doing wrong.
Ok that didn’t post right. I’ll just put the attribute I’m using for the a tag.
onclick=”$(“#cloud”).stop(true, true);”
This should work but it’s not. Any idea how to get it to work?
…perfect world people should know other people, right ;)
perhaps you can bind or assign over onclick a function and try to stop all animated elements…
html:
js:
$(document).ready(function()
{
$(‘.clouds’).function(){
//stop all elements
// or assign css
});
});
i had not tested this. but if you can assign a function to your clickable elements, then you shold fire up the stop call. thank you for this information. you are welcome, ping.
you should better use the .click() function. ;)
// Stop animation when button is clicked
$(“.clouds”).click(function(){
$(“.clouds”).stop();
});