Clouds is a jQuery plugin that displays clouds moving across a sky. It comes preconfigured with an image map of clouds but can be used with a custom image map of anything you please, limited only by your imagination. Why not try flying farm animals?

Clone from GitHub.

Features

  • Uses an image map rather than seperate image files for optimum performance
  • Clean markup. No additional divs or img tags required. Just one div container
  • Customizable image map via XML file
  • Support inline content if preferred
  • Customizable animation parameters including speed, density and bobbing
  • Multiple instances per page or per container
  • Cross Browser compatible
  • Adjustable Frame-Per-Second for quality vs. performance adjustments
  • Smart clipping prevents messy overflow as clouds transition past the container’s bounds.
  • JSLint verified.
  • Compatability

Testing has been completed with IE6.0+, Firefox 2+, Safari 4+ and Opera 10 using jQuery 1.3+.

Installation

Load jQuery and jQuery.Clouds into your page:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
<script type="text/javascript" src="jquery.clouds.js"></script>

Attach Clouds to a container:

$(document).ready(function({
    $('#myContainer').jClouds();
});

Configuration

The following options are available when executing the script:

xmlMap [Default: ‘clouds.xml’]

URL of the image map XML file, relative to the script. If none provided, inline content (ie. the container’s children) will be converted to clouds instead.

cloudCount [Default: 20]

The number of clouds displayed at random in the selected container.

speed [Default: 40]

The speed (pixels per second) at which the clouds move.

speedVariation [Default: 0.33]

The maximum random variation from ‘speed’ of each cloud, expressed as fraction of 1.

A speed variation of 0 will result in all clouds traveling at the same speed.

A speed variation of 0.5 will result in some clouds traveling 1.5x faster than the configured speed.

A speed variation of 1 will result in some clouds traveling 2x faster than the configured speed and some standing still. Not recommended.

bobHeight [Default 3]

The height in pixels that each cloud will bob. Set to 0 to disable bobbing

bobWidth [Default 20]

The width in pixels that each cloud will pass in one bob

fps [Default: 25]

The Frame-Per-Second of the animation. Higher settings produce smoother results but can affect browser performance.

clipLeft [Default: false]

Clouds are clipped at the left of their container.

clipRight [Default: false]

Clouds are clipped at the right of their container.

clipBottom [Default: false]

Clouds are clipped at the bottom of their container.

clipTop [Default: false]

Clouds are clipped at the top of their container.

Configuration settings can be set when executing the script on your container as follows:

$(document).ready(function(){
    $('#myContainer').clouds({
        xmlMap: 'clouds.xml',
        cloudCount: 25,
        speed: 20,
        speedVariation: 0.33,
        fps: 25,
        clipBottom: false,
        clipTop: true
    });
});

Image Map

The Image map XML file should define the URL of the image to use and the coordinates of each sprite (cloud) on the image.

It must have a root element named clouds with an attribute named src pointing to the image file.

The root element should contain children named cloud with the attributes width, height, left and top defining the coordinates of each sprite as integers.

This is the default image map file:

<clouds src="clouds.png">
    <cloud left="0" top="0" width="176" height="68" />
    <cloud left="176" top="0" width="194" height="69" />
    <cloud left="0" top="68" width="142" height="67" />
    <cloud left="142" top="69" width="201" height="67" />
    <cloud left="0" top="135" width="106" height="50" />
    <cloud left="106" top="137" width="93" height="46" />
    <cloud left="199" top="136" width="115" height="65" />
    <cloud left="0" top="185" width="77" height="34" />
    <cloud left="77" top="184" width="122" height="43" />
    <cloud left="199" top="201" width="47" height="22" />
    <cloud left="251" top="201" width="58" height="29" />
</clouds>

Features in development

jClouds is no longer in development, however pull requests are welcome on GitHub.

Change Log

  • 30/08/2015 v0.3.0 Re-released on GitHub
  • 07/08/2011 v0.2.0 Significant performance improvements
  • 04/07/2011 v0.1.0 Initial release.