">

Moving Clouds – Animation using jQuery Spritely 0.6

CSS, jQuery, Tutorials 7 responses so far

I am pretty sure that there are bunches of animation lovers like me who would be happy to add a little bit of animated stuffs into their pages. Say, we want to give a thrill to our visitors, so they may feel clouds are passing by our pages. Exactly, we will create layers of clouds under our page’s main content and animate those cloud layers using jQuery plugin Spritely beside few CSS/HTML works.

Figure: Moving Clouds – Animation using Spritely 0.6

 

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:

Figure: Simulation diagram showing layers to be animated

Now lets build the following scenarios.

 

Scenario: we 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;
}

 

Scenario: We 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.

 

Scenario: we 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.

Figure: Clouds, a bit far from the view

Figure: Clouds, near from the view

To do this, we 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 class=" container ">
    <div id="far-clouds" class=" far-clouds stage "></div>
    <div id="near-clouds" class=" near-clouds stage "></div>
    <div class=" mainContent "> </div>
</div>

Note that, the page contents will be inside <div class=” mainContent “>.

 

Scenario: 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.

 

Scenario: We want to make our page contents visible on top of the animations.

.mainContent{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 101;
}

Remember, the main contents should have higher z-index value than the ‘stage’ to view on top of the animation.

<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>

 

Scenario: Flying speed & direction should be controllable.

Check out the demo & source codes given at download section.

 

 

 

 

Facts for choosing Spritely:

Honestly, I was looking for some sort of jQuery animation sprite thingy that is minimal, easier to grasp, cross browser, mobile device touch compatibility i.e. Android, iPhone, iPad and usable in my commercial projects (Dual licensed under the MIT or GPL Version 2 licenses), finally/spritely working for me.

Read the next episode here.

The following two tabs change content below.
PHP Hacker, Foss advocate, Community activist, Author of the book PHP Application Development with NetBeans: Beginner's Guide http://link.packtpub.com/6HaElo, open for project consultancy.
  • sam jasper

    beautiful

  • I used it in my website, thanks for the tips, I think that now will are able to forget Adobe Flash, right?

  • It is on the right way 🙂

  • what is that plugin you are using for displaying code snippets?

  • Mike

    thank You! I have a problem.. My speed is the same for all the elements I’m floating.. what can be done to make it work:

    jQuery(document).ready(function() {
    jQuery(‘.c1’).pan({fps: 30, speed: 0.01, dir: ‘left’, depth: 30});
    jQuery(‘.c2’).pan({fps: 30, speed: 0.025, dir: ‘left’, depth: 35});
    jQuery(‘.c3’).pan({fps: 30, speed: 0.05, dir: ‘left’, depth: 45});
    jQuery(‘.c4’).pan({fps: 30, speed: 0.40, dir: ‘left’, depth: 22});
    jQuery(‘.c5’).pan({fps: 30, speed: 0.30, dir: ‘left’, depth: 82});
    });

  • Hey bro, this plugin has a conflict with the latest version of jquery, When I’m inserting jquery 1.3.6 it is working fine, but when I’m using the latest jquery the cloud stops rolling. But I also do need to use latest jquery cause bootstrap framework needs it.
    Please tell me how do I fix it.

  • Steven

    Easy 🙂 Just download the new spritley version: http://www.spritely.net/documentation/

    The old version is full of errors, because the $browser Vars are deprecated.