This plugin will create a animated tag cloud out of the list of tags for your blog/site. It is based upon the jQuery framework. Although there are many tag cloud available in jQuery Plugin arsenal, I really felt the need to create this one. The plugin include font animation as well as tag animation in three ways (horizontal, vertical and random). The animation will stop when user mouse over on the tag cloud, restarts after sometime after mouse out. Very easy to implement and customize. You just need to write a simple line apply it on the <div> or <ul> containing list of tags.
ScreenShot jQuery Tag Cloud Plugin
Usage
Step 1: Style tags container. The tags container can be div, ul or anything else. But you need to define these style properties for the tags container before using the plugin – Position, Width and Height. You can style <a> of the tags as you wish.
Step 2: Include latest jquery.js and jquery.tagcloud.min.js in <head> section of the page like following,
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”jquery.tagcloud.min.js”></script>
Step 3: Apply the tag cloud plugin on the tags container. like following
<script type=”text/javascript”>
$(function(){
$(“#tag-cloud”).tagCloud();
});
</script>
Instead of #tag-cloud, just give #<id of the tags container>
Customize
Direction: You can choose the direction of the tags movement. There are 3 options – “vertical” (see Example3), “horizontal” (see Example2) and “random” (see Example1). The default option is “random”. You can set it as following,
$(“#tag-cloud”).tagCloud({“direction”:”horizontal”});
Easein: You can use various kinds of easing effects provided by the jquery easing plugin. The list of easing effects can be found at http://gsgd.co.uk/sandbox/jquery/easing/ . Please Note if you want to use this option, then first include the easing plugin before applying the plugin. See Example2 and Example3. You can set this option like,
<script type=”text/javascript” src=”http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js”></script>
<script type=”text/javascript”>
$(function(){
$(“#tag-cloud1″).tagCloud({ “easein”:”easeOutBounce”});
});
</script>
Speed: You can set the speed of the tags animation in the plugin. You simply need to set the speed option parameter. It only accept numeric value like 2000 (2 seconds). Keep it more than 2000 for smooth animation. It can be set as,
$(“#tag-cloud”).tagCloud({“speed”:2000});
Combination: You can set all the options at once like
$(“#tag-cloud”).tagCloud({“direction”:”vertical”, “easein”:”easeOutBack”, “speed”:2000});