Demo: How to Use jQuery Animation Effect to Move the Clouds in your Sky in 5 Steps

google_wave_jquery_animation_effect_sky_clouds_move

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 and a Download Demo.zip, which is a copy of the online demo.

Exploratree – Web Based Ready-Made Interactive Thinking Guides
Exploratree is a free online library of thinking guides to make your own thinking guides....
Highcharts – Charting Library written in pure JavaScript
Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interact...
Hello to Émile – Small JavaScript CSS Animation Framework
Émile has a full set of CSS properties for animation (length-based and colors) and includes easing a...