3D Sphere Tag Cloud Plugin with jQuery and CSS3 - TagSphere

TagSphere is a lightweight jQuery plugin for creating an animated 3D sphere tag cloud from a list of links. Works well on modern browsers which support CSS3 transitions.

See also:

• jQuery Plugin To Create 3D Sphere-style Tag Cloud - tagcloud
• Awesome Tag Cloud Plugin with jQuery and Html5 Canvas - awesomeCloud
• jQuery Simple Clean Tag Cloud Plugin - tx3TagCloud
• Minimal jQuery Based 3D Ball Tag Cloud - cloudTag.js
• TagCanvas - HTML5 Tag Cloud with Jquery

How to use it:

1. Create a list of links for the tag cloud.

<ul class="tagsphere">
  <li><a href="http://google.com">Google</a></li>
  <li><a href="http://www.yahoo.com/">Yahoo!</a></li>
  <li><a href="http://www.bing.com/">Bing</a></li>
  ...
</ul>

2. Create an empty container to place the tag cloud.

<div id="tagsphere-holder"></div>

3. Load the jQuery library and the jQuery TagSphere plugin at the bottom of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="tagsphere.js"></script> 

4. Initialize the plugin and setup the font sizes you wish to use.

// $tagsphere(holder, options, callback)
var ts_style = {
border: true, 
bordercolor:"#276894",
backgroundcolor:"rgb(76,163,217)"
tag:{
  backgroundcolor: "rgba(39,104,148,.8)", 
  borderstyle: "dashed", 
  borderwidth:"2px", 
  font:"Georgia"
}
mousespeed: 1.3,
refresh: 100,
size:240, 
smallestsize:40, 
biggestsize:45
};
$tagsphere("tagsphere-holder", ts_style);

5. The sample CSS to style the tag cloud.

span {
  font-weight: bold;
  -webkit-transition: .1s ease-in-out;
  -moz-transition: .1s ease-in-out;
  -o-transition: .1s ease-in-out;
  transition: .1s ease-in-out;
}

#tagsphere-holder { border-radius: 50%; }

.tag { cursor: pointer; }

.tag:hover { color: #000; }

a {
  -webkit-font-smoothing: antialiased;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
  text-decoration: none;
  color: auto;
}

Change log:

2014-08-16

• Click to Start option added
• Fixing Callback

2014-08-05

• Update feature, reset, and load

2014-08-03

• Many updates, renaming, callbacks, options, etc.

2014-08-03

• Added external JSON input

2014-08-02

• Physics improvement and options added!

---

This awesome jQuery plugin is developed by mtaylor22. For more Advanced Usages, please check the demo page or visit the official website.