HTML And CSS

How to Create 3D Tag Cloud using jQuery

We have all seen Tag Clouds on blogs and websites. If you haven't seen one, well it consists of all the tags you have given to posts on your websites arranged in a 3D cloud which rotates when you point to a tag and brings it into focus.

Today we'll see how to build the same using jQuery, which is a JavaScript framework.

Well, the HTML part is pretty easy to write. All we need is the list of tags in a div. The next thing we want to work on is the stylesheet. Or maybe you can include the styles in the HTML file itself.

The anchor links should have position: absolute. This way the jQuery can give it x and y coordinates and the links will just go and sit there. Also, we need to give a height and width of the div wrapper. Now, give the wrapper position: relative to keep the links inside the wrapper. (optional)

What's left now?

Preview: 3D Tag Cloud using jQuery

Yes, the most important part, jQuery. We are going to use some 3D trigonometry here. First, we write the mouse event. We figure out how far the mouse is away from the center and assign it to a variable that controls the speed of the scrolling list.

After that, we step through each element in our list and give each one a place on the 3D circle. A for loop governs this and evenly assigns an angle to each element. (1st = 0 degrees, 2nd = 5 degrees, 3rd = 10 degrees, etc) We'll animate it now.

We use setInterval to call our render function again and again. The render function goes through each element and decides where and how it should be displayed. The trigonometry creates a set of numbers that when plotted on a graph look like a wave.

If we apply these to the size of the text, it appears to go back and forth in space. If we apply these numbers to they, this will give you the appearance that the text is going around in a circle. Try to change the values to understand better.

So let us look at the Complete Code:

Stylesheet

 <style type="text/css" media="screen">
body{
font-family: Arial, "MS Trebuchet", sans-serif;
background-color: #222;
}
#list{
height:600px;
width:600px;
overflow:hidden;
position:relative;
background-color: #000;
}
#list ul,
#list li{
list-style:none;
margin:0;
padding:0;
}
#list a{
position:absolute;
text-decoration: none;
color:#666;
}
#list a:hover{
color:#ccc;
}
</style>

HTML


<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" charset="utf-8"></script><div id="list">
<ul>
<li><a href="#">ADVERTISING</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">Woocommerce</a></li>
<li><a href="#">Technology</a></li>
<li><a href="#">Social Media Marketing</a></li>
<li><a href="#">Plugin</a></li>
<li><a href="#">Email Marketing</a></li>
<li><a href="#">Ecommerce</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">Web Hosting</a></li>
<li><a href="#">Domain</a></li>
<li><a href="#">Make Money Online</a></li>
<li><a href="#">xhtml</a></li>
</ul>
</div>

JavaScript


<script type="text/javascript">
$(document).ready(function(){
var element = $('#list a');
var offset = 0;
var stepping = 0.01;
var list = $('#list');
var $list = $(list)
$list.mousemove(function(e){
var topOfList = $list.eq(0).offset().top
var listHeight = $list.height()
stepping = (e.clientY - topOfList) /  listHeight * 0.2 - 0.1;
});
for (var i = element.length - 1; i >= 0; i--)
{
element[i].elemAngle = i * Math.PI * 2 / element.length;
}
setInterval(render, 20);
function render(){
for (var i = element.length - 1; i >= 0; i--){
var angle = element[i].elemAngle + offset;
x = 120 + Math.sin(angle) * 30;
y = 45 + Math.cos(angle) * 50;
size = Math.round(40 - Math.sin(angle) * 40);
var elementCenter = $(element[i]).width() / 2;
var leftValue = (($list.width()/2) * x / 100 - elementCenter) + "px"
$(element[i]).css("fontSize", 30 + "pt");
$(element[i]).css("opacity",size/100);
$(element[i]).css("zIndex" ,size);
$(element[i]).css("left" ,leftValue);
$(element[i]).css("top", y + "%");
}
offset += stepping;
}
});
</script>

This post was published on August 8, 2016 10:41 PM

Anant Vijay Soni

A passionate blogger and serial youtuber, timely efforts, and dedication are the key protocols that keep me succeeding. I love to share information about WordPress, SEO, Social Media Marketing, Affiliate Marketing, Make Money Online, Email Marketing and much more.

Leave a Comment
Share
Published by

Recent Posts

  • CPA Marketing

Secret Trick Exposed: Earn $250 Daily with CPA Marketing for Free! (Beginner-Friendly Guide)

https://www.youtube.com/watch?v=wm6MXs3O5WE Subscribe to My Youtube Channel Secret Trick to Earn $250 Daily with CPA Marketing… Read More

March 26, 2025
  • Dropshipping

How to Create a Wix Dropshipping Store/Website?

https://www.youtube.com/watch?v=JqN6DRaPFYs In this Wix dropshipping tutorial, you will learn how to create a dropshipping website… Read More

March 17, 2025
  • CPA Marketing

10+ CPA Marketing Free Traffic Methods: Expert Strategies

To make good money from CPA marketing, Expert's Secret strategies are required to perform well… Read More

March 4, 2025
  • Make Money Online

How could I make money if I own a website (not from selling products)?

Are you looking to turn your website into a revenue-generating asset without the hassle of… Read More

March 4, 2025
  • Affiliate Marketing

Earn ₹2.50 Per Click with IndiaMART Affiliate Program – A Simple Guide for Beginners

Are you looking for a way to earn money online just by sharing links? or… Read More

March 4, 2025
  • Affiliate Marketing

CPA Marketing in 2025: Emerging Trends and Opportunities

Welcome to our in-depth exploration of the emerging trends and opportunities in CPA marketing in… Read More

February 24, 2025