Animated Tag Cloud – jQuery

Cloud is a jquery plugin that turns li in a list into moving clouds.

Documentation

Step 1 :

Cloud is requires simple ul and li markup tags as follows :

<div id="sky">
 <ul>
 <li><a href="#">Skipper</a></li>
 <li><a href="#">Kowalski</a></li>
 <li><a href="#">Private</a></li>
 <li><a href="#">Rico</a></li>
 </ul>
 </div>

Step 2 :

Since cloud is a plugin for jQuery, you’ll need to call the jQuery library first :

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Step 3 :

Include the cloud plugin in your page as follows :

<script type="text/javascript" src="jquery.cloud.js"></script>

If you are using custom stylesheets for cloud, you can call the stylesheets here or you can use the default stylesheet :

<link rel="stylesheet" href="jquery.cloud.css" type="text/css" />

Step 4 :

Add this code to your page to implement the cloud plugin :

<script type="text/javascript">
 $(document).ready(function(){
 $('#sky').cloud();
 });
 </script>

Configuration

Cloud supports 3 configuration options : duration, diagonal, and classes.

duration (integer) : the duration of the animation.
1000 is for 1 second. Larger values will make elements move slower.

diagonal (string) : set the path of elements in the Y-axis. ‘+’ will make elements move towards the top. ‘-’ make elements move to the bottom of the page.

classes (string array) : Cloud assigns random classes to elements. You can use this option to set the classes.
Example : “cloud-small,cloud-medium,cloud-big”

Sample

<script type="text/javascript">
 $(document).ready(function(){
 $('#sky').cloud({
 'duration' : 15000,
 'diagonal' : '+',
 'classes' : "cloud-small,cloud-medium,cloud-big"
 });
 });
 </script>

Notes

This plugin is still under active development. We haven’t tested on Internet Explorer yet. You can post comments here.