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.

Author: Arshad Chummun
Documentation: Click Here
Download: Click Here
Comments: Click Here

Related Posts:
GD Star Rating
loading…
August 10th, 2010 | Blue | 1 Comment | Tags: animated, jquery, tag cloud

About The Author

Steve

Hi I am a webdeveloper based in Brisbane, Australia. Fanatical about the internet and website code and development. Hence this site, a showcase resource site for you to get the latest greatest code , scripts , apps and demos all from the one venue.