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

3D Sphere Tag Cloud Plugin with jQuery and CSS3 - TagSphere
File Size: 10.1 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.