Cloud is a jquery plugin that turns li in a list into moving clouds.
Although the plugin was first developed for an animated tag cloud for Drupal Mauritius, it has been extended to achieve awesome effects.
Check the documentation for a list of configurations and the implementation section for html tags and how to use the plugin.
A list of demo is available in the menu.
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>
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"
<script type="text/javascript">
$(document).ready(function(){
$('#sky').cloud({
'duration' : 15000,
'diagonal' : '+',
'classes' : "cloud-small,cloud-medium,cloud-big"
});
});
</script>
This plugin is still under active development. We haven't tested on Internet Explorer yet. You can post comments here.