February 11, 2014 / IST / How-to Guides, Web Development.

Today, I was wondering to design a background moving cloud animation for a website. Now-a-days many website have moving image like cloud, tree moon, etc. for animation stuff. Animation makes webpage beautiful. To design this animation, I thought I should flash. But after sometime my mind thought, if my visitor doesn’t install Flash Player Plugins then they will not see my animation. After researching to get rid this problem. I decided to use Jquery, CSS and HTML. In this type of animation use of Jquery is more beneficial than Flash.

How to design Background Moving Cloud?

First, Simply design a HTML page then Add the jQuery plugin, download and include it into document along with jQuery as usual way,

<script src="scripts/jquery-1.6.3.min.js" type="text/javascript"></script>
<script src="scripts/jquery.spritely-0.6.js" type="text/javascript"></script>

 Checkout the simulation diagram showing layers to be animated:

Now lets build the follow the step.

Step 1 : You have to need a sky. To do this, we will just add the following CSS class for body element. Here, we will have sky-blue page background with the gradient-type image of the same, so our document background has a sky like horizon.

body {
    background: #aedfe5 url(images/sky.png) 0 0 repeat-x;
}

Step 2: Now You have to need some sort of Stage where all those animations will be performed.

Add the following ‘stage’ class:

.stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 900px;
    height: 100%;
    overflow: hidden;
    z-index: 100;
}

It is just a CSS class to organize HTML elements positions & z-index.

Step 3: You can have clouds near and far from our sight at sky.




Alike the following images;  make sure the two background images are wide enough to fit perfectly for a background animation.

Clouds, a bit far from the view

Clouds, near from the view

Step4: To do this, you have two layers or classes or DIVs of clouds, one for near one and the other for far one. The following two classes describe the two layers of clouds.

.far-clouds { background: transparent url(images/far-clouds.png) 305px 102px repeat-x; }
.near-clouds { background: transparent url(images/near-clouds.png) 305px 162px repeat-x; }

Inside the <body> tag, <div> elements with those classes will be like below:

<div>
    <div id="far-clouds"></div>
    <div id="near-clouds"></div>
    <div> </div>
</div>

Note that, the page contents will be inside.

Control speed of far and near cloud:

Step 4: Near and Far clouds may have different speed.

Time to use some Spritely on those elements with clouds at background, just like below:

$(document).ready(function() {
    $('#far-clouds').pan({fps: 30, speed: 0.7, dir: 'left'});
    $('#near-clouds').pan({fps: 30, speed: 1, dir: 'left'});
});

Here, fps is frame-per-second, speed is pixels-per-frame, dir is animation direction.

Spritely is a simple plugin with only two key methods, sprite() and pan() both of which simply animate the background-image css property of an element. The difference between the two is that a ‘sprite’ image contains two or more ‘frames’ of animation, whereas a ‘pan’ image contains a continuous image that pans left or right and then repeats.

You want to make our page contents visible on top of the animations.

<div class=" container ">
    <div id="far-clouds" class=" far-clouds stage "></div>
    <div id="near-clouds" class=" near-clouds stage "></div>
    <div class=" mainContent">
      <!-- main contents goes here -->
    </div>
</div>

 Now your Moving Cloud Animation is Ready

Download and View Demo