3D Sphere Tag Cloud Plugin with jQuery and CSS3 - TagSphere
File Size: | 10.1 KB |
---|---|
Views Total: | 9428 |
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:
- 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.