1. We have moved from vBulletin to XenForo and you are viewing the site in the middle of the move. Though the functional aspect of everything is working fine, we are still working on other changes including the new design on Xenforo.
    Dismiss Notice

Creating Your Own 3D Tag Cloud using jQuery

Discussion in 'Web Design, HTML And CSS Tutorials' started by blitzcoder, Sep 5, 2010.

  1. blitzcoder

    blitzcoder New Member

    Joined:
    Aug 24, 2010
    Messages:
    12
    Likes Received:
    2
    Trophy Points:
    0
    Occupation:
    Student
    Location:
    Surat, India
    Home Page:
    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 Javascipt 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 co-ordinates 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)

    Whats left now? 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 the y, 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 code.
    StyleSheet
    Code:
    <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
    Code:
    <div id="list">
        <ul>
            <li><a href="#">ajax</a></li>
            <li><a href="#">css</a></li>
            <li><a href="#">design</a></li>
            <li><a href="#">firefox</a></li>
            <li><a href="#">flash</a></li>
            <li><a href="#">html</a></li>
            <li><a href="#">Devirtuoso</a></li>
            <li><a href="#">jquery</a></li>
            <li><a href="#">PHP</a></li>
            <li><a href="#">SEO</a></li>
            <li><a href="#">usability</a></li>
            <li><a href="#">www</a></li>
            <li><a href="#">web</a></li>
            <li><a href="#">xhtml</a></li>
        
        </ul>
    </div>
    
    JavaScript
    Code:
    <script type="text/javascript">
    
    $(document).ready(function(){
        
    	var element = $('#list a');
    	var offset = 0; 
    	var stepping = 0.03;
    	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) * 40;
            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", size + "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>
    
    Complete sample
    Code:
    <html>
    <head>
    <title>3D tag cloud</title>
    
    <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>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" charset="utf-8"></script>
    
    </head>
    <body>
        
    <div id="list">
        <ul>
            <li><a href="#">ajax</a></li>
            <li><a href="#">css</a></li>
            <li><a href="#">design</a></li>
            <li><a href="#">firefox</a></li>
            <li><a href="#">flash</a></li>
            <li><a href="#">html</a></li>
            <li><a href="#">Devirtuoso</a></li>
            <li><a href="#">jquery</a></li>
            <li><a href="#">PHP</a></li>
            <li><a href="#">SEO</a></li>
            <li><a href="#">usability</a></li>
            <li><a href="#">www</a></li>
            <li><a href="#">web</a></li>
            <li><a href="#">xhtml</a></li>
        
        </ul>
    </div>
    
    <script type="text/javascript">
    
    $(document).ready(function(){
        
    	var element = $('#list a');
    	var offset = 0; 
    	var stepping = 0.03;
    	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) * 40;
            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", size + "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>
    
    </body>
    </html>
    Looks comprehensible after the explanation, right? :) So here you are, ready to introduce a flashy 3D tag cloud on your own website.
     
  2. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,276
    Likes Received:
    364
    Trophy Points:
    83
  3. rozerdun

    rozerdun New Member

    Joined:
    Jul 16, 2011
    Messages:
    11
    Likes Received:
    2
    Trophy Points:
    0
    Home Page:
    Thanks for the post i am not developer but i was searching this code for my blog and now i am able to create my tags in 3d.
     
  4. alssadi

    alssadi Banned

    Joined:
    Dec 11, 2010
    Messages:
    41
    Likes Received:
    3
    Trophy Points:
    0
    Occupation:
    Creative director & web developer
    Location:
    Dubai
    Home Page:
    i would like to help in this , attachment the JS file , very nice love it
     

    Attached Files:

Share This Page