Animated 3D Tags Cloud Using jQuery

Animated 3D Tags Cloud Using jQuery
Code Snippet:SVG-3D-Tag
Author: Swarup Kumar Kuila
Published: March 22, 2024
Last Updated: March 22, 2024
Downloads: 70
License: MIT
Edit Code online: View on CodePen
Read More

The code creates an Animated 3D Tags Cloud using jQuery. It displays clickable tags in a 3D space. It utilizes SVG elements for rendering. The major functionality involves generating tags with labels and links. It helps showcase various links in an interactive and visually appealing manner.

You can use this code on your website to create an eye-catching tag cloud. It adds interactivity and engagement to your site’s design. It also provides an innovative way to showcase related content or navigate through links.

How to Create Animated 3D Tags Cloud Using jQuery

1. First of all, include the jQuery library in your HTML file using the following CDN link:

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>

2. In HTML, add a container element where the tags cloud will be displayed:

<div id='tag-cloud'></div>

3. Style the container and any necessary elements for the tags cloud using CSS. Here’s a basic example:

body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
    background-color: #181828 !important;
}

*
{
  margin:0;
  padding:0;
}

#tag-cloud svg rect
{
  fill:transparent;
}

4. Finally, add the following JavaScript code between <script> tag or external JS file. This code initializes the 3D tags cloud and handles its animation and interaction.

!function(){function t(t,e){function n(){A=document.createElementNS(E,"svg"),A.addEventListener("mousemove",v),t.appendChild(A),p.bgDraw&&(P=document.createElementNS(E,"rect"),P.setAttribute("x",0),P.setAttribute("y",0),P.setAttribute("fill",p.bgColor),A.appendChild(P)),a(),i(),d(),window.addEventListener("resize",y)}function i(){var e=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,n=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight,i=e,r=n;p.width.toString().indexOf("%")>0||p.height.toString().indexOf("%")>0?(i=Math.round(t.offsetWidth/100*parseInt(p.width)),r=Math.round(i/100*parseInt(p.height))):(i=parseInt(p.width),r=parseInt(p.height)),i>=e&&(i=e),r>=n&&(r=n),b={x:i/2,y:r/2},O.x=p.speed/b.x,O.y=p.speed/b.y,w=i>=r?r/100*parseInt(p.radius):i/100*parseInt(p.radius),1>w&&(w=1),x=w/2,x<p.radiusMin&&(x=p.radiusMin,w=2*x),A.setAttribute("width",i),A.setAttribute("height",r),p.bgDraw&&(P.setAttribute("width",i),P.setAttribute("height",r)),o(x)}function o(t){for(var e=0,n=S.length;n>e;e++)r(S[e],t)}function r(t,e){var n=t.vectorPosition.x-C.x,i=t.vectorPosition.y-C.y,o=t.vectorPosition.z-C.z,r=Math.sqrt(n*n+i*i+o*o);t.vectorPosition.x/=r,t.vectorPosition.y/=r,t.vectorPosition.z/=r,t.vectorPosition.x*=e,t.vectorPosition.y*=e,t.vectorPosition.z*=e}function s(t,e,n,i,o){var r={};return r.element=document.createElementNS(E,"text"),r.element.setAttribute("x",0),r.element.setAttribute("y",0),r.element.setAttribute("fill",p.fontColor),r.element.setAttribute("font-family",p.fontFamily),r.element.setAttribute("font-size",p.fontSize),r.element.setAttribute("font-weight",p.fontWeight),r.element.setAttribute("font-style",p.fontStyle),r.element.setAttribute("font-stretch",p.fontStretch),r.element.setAttribute("text-anchor","middle"),r.element.textContent=p.fontToUpperCase?e.label.toUpperCase():e.label,r.link=document.createElementNS(E,"a"),r.link.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",e.url),r.link.setAttribute("target",e.target),r.link.addEventListener("mouseover",f,!0),r.link.addEventListener("mouseout",h,!0),r.link.appendChild(r.element),r.index=t,r.mouseOver=!1,r.vectorPosition={x:n,y:i,z:o},r.vector2D={x:0,y:0},A.appendChild(r.link),r}function a(){for(var t=1,e=p.entries.length+1;e>t;t++){var n=Math.acos(-1+(2*t-1)/e),i=Math.sqrt(e*Math.PI)*n,o=Math.cos(i)*Math.sin(n),r=Math.sin(i)*Math.sin(n),a=Math.cos(n),u=s(t-1,p.entries[t-1],o,r,a);S.push(u)}}function u(t){for(var e=0,n=S.length;n>e;e++){var i=S[e];if(i.element.getAttribute("x")===t.getAttribute("x")&&i.element.getAttribute("y")===t.getAttribute("y"))return i}}function c(t){for(var e=u(t),n=0,i=S.length;i>n;n++){var o=S[n];o.index===e.index?o.mouseOver=!0:o.mouseOver=!1}}function l(){var t=O.x*z.x-p.speed,e=p.speed-O.y*z.y,n=t*k,i=e*k;D.sx=Math.sin(n),D.cx=Math.cos(n),D.sy=Math.sin(i),D.cy=Math.cos(i);for(var o=0,r=S.length;r>o;o++){var s=S[o];if(M){var a=s.vectorPosition.x,u=s.vectorPosition.y*D.sy+s.vectorPosition.z*D.cy;s.vectorPosition.x=a*D.cx+u*D.sx,s.vectorPosition.y=s.vectorPosition.y*D.cy+s.vectorPosition.z*-D.sy,s.vectorPosition.z=a*-D.sx+u*D.cx}var c=p.fov/(p.fov+s.vectorPosition.z);s.vector2D.x=s.vectorPosition.x*c+b.x,s.vector2D.y=s.vectorPosition.y*c+b.y,s.element.setAttribute("x",s.vector2D.x),s.element.setAttribute("y",s.vector2D.y);var l;M?(l=(x-s.vectorPosition.z)/w,l<p.opacityOut&&(l=p.opacityOut)):(l=parseFloat(s.element.getAttribute("opacity")),l+=s.mouseOver?(p.opacityOver-l)/p.opacitySpeed:(p.opacityOut-l)/p.opacitySpeed),s.element.setAttribute("opacity",l)}S=S.sort(function(t,e){return e.vectorPosition.z-t.vectorPosition.z})}function d(){requestAnimFrame(d),l()}function f(t){M=!1,c(t.target)}function h(t){M=!0}function v(t){z=m(A,t)}function m(t,e){var n=t.getBoundingClientRect();return{x:e.clientX-n.left,y:e.clientY-n.top}}function y(t){i()}var p={entries:[],width:480,height:480,radius:"70%",radiusMin:75,bgDraw:!0,bgColor:"#000",opacityOver:1,opacityOut:.05,opacitySpeed:6,fov:800,speed:2,fontFamily:"Arial, sans-serif",fontSize:"15",fontColor:"#fff",fontWeight:"normal",fontStyle:"normal",fontStretch:"normal",fontToUpperCase:!1};if(void 0!==e)for(var g in e)e.hasOwnProperty(g)&&p.hasOwnProperty(g)&&(p[g]=e[g]);if(!p.entries.length)return!1;var x,w,b,A,P,S=[],M=!0,z={x:0,y:0},C={x:0,y:0,z:0},O={x:0,y:0},D={sx:0,cx:0,sy:0,cy:0},k=Math.PI/180,E="http://www.w3.org/2000/svg";window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),n()}window.SVG3DTagCloud=t}(),"undefined"!=typeof jQuery&&!function(t){t.fn.svg3DTagCloud=function(e){return this.each(function(){t.data(this,"plugin_SVG3DTagCloud")||t.data(this,"plugin_SVG3DTagCloud",new SVG3DTagCloud(this,e))})}}(jQuery);	

$( document ).ready( function() {

            var entries = [ 

                { label: 'svg dual icons', url: 'https://codepen.io/uiswarup/pen/JjVPBem', target: '_blank' },
                { label: 'pop up menu', url: 'https://codepen.io/uiswarup/pen/yLwmmdr', target: '_blank' },
                { label: 'Menu Design', url: 'https://codepen.io/uiswarup/pen/JjzgQVz', target: '_blank' },
                { label: 'bubbles animation', url: 'https://codepen.io/uiswarup/pen/XWGGyWQ', target: '_blank' },
                { label: 'Dropdown Menu', url: 'https://codepen.io/uiswarup/pen/yLwmmdr', target: '_blank' },
                { label: '3D', url: 'https://codepen.io/uiswarup/pen/rNRjRZN', target: '_blank' },
                { label: 'happy birthday', url: 'https://codepen.io/uiswarup/pen/MWxadGe', target: '_blank' },
                { label: 'dashboard', url: 'https://codepen.io/uiswarup/pen/eYXNPRv', target: '_blank' },
                { label: 'ui Kit', url: 'https://codepen.io/uiswarup/pen/yLwNOqX', target: '_blank' },
                { label: 'fish animation', url: 'https://codepen.io/uiswarup/pen/dywmxmL', target: '_blank' },
                { label: 'Galaxy', url: 'https://codepen.io/uiswarup/pen/ExGNQVY', target: '_blank' },
                { label: 'Error 404', url: 'https://codepen.io/uiswarup/pen/XWdXGGV', target: '_blank' },
                { label: 'Lord Ganesha', url: 'https://codepen.io/uiswarup/details/abNBGKL', target: '_blank' },
                { label: 'Prcing Table', url: 'https://codepen.io/uiswarup/pen/xxZrLGp', target: '_blank' },
                { label: 'New Login', url: 'https://codepen.io/uiswarup/pen/zYvGKed', target: '_blank' },
                { label: 'Creative Section Design', url: 'https://codepen.io/uiswarup/pen/ExjrZzV', target: '_blank' },
                { label: 'svg loader', url: 'https://codepen.io/uiswarup/pen/JjdegRO', target: '_blank' },
                { label: '404 Error', url: 'https://codepen.io/uiswarup/pen/dyoyLOp', target: '_blank' },
                { label: 'dust particle', url: 'https://codepen.io/uiswarup/pen/oNXYNOB', target: '_blank' },
                { label: 'Creative Hexagon with Hover Effect', url: 'https://codepen.io/uiswarup/pen/ExjZrdQ', target: '_top' },
                { label: 'Birthday Card', url: 'https://codepen.io/uiswarup/pen/zYxPdzG', target: '_top' },
                { label: 'Alert Message', url: 'https://codepen.io/uiswarup/pen/RwNraeW', target: '_top' },
                { label: 'happy new year', url: 'https://codepen.io/uiswarup/pen/JjojQby', target: '_top' },
                { label: 'menu with awesome hover', url: 'https://codepen.io/uiswarup/pen/dyyqaGR', target: '_top' },
                { label: 'Mobile Menu', url: 'https://codepen.io/uiswarup/pen/ExJavGG', target: '_top' },
                { label: 'awesome slider', url: 'https://codepen.io/uiswarup/pen/LXYwwW', target: '_top' },
                { label: 'Animated Background', url: 'https://codepen.io/uiswarup/pen/RBrzpZ', target: '_blank' },
                { label: 'border-animation-css', url: 'https://codepen.io/uiswarup/pen/RBByzW', target: '_blank' }

            ];

            var settings = {

                entries: entries,
                width: 640,
                height: 480,
                radius: '65%',
                radiusMin: 75,
                bgDraw: true,
                bgColor: '#111',
                opacityOver: 1.00,
                opacityOut: 0.05,
                opacitySpeed: 6,
                fov: 800,
                speed: 2,
                fontFamily: 'Oswald, Arial, sans-serif',
                fontSize: '15',
                fontColor: '#fff',
                fontWeight: 'normal',//bold
                fontStyle: 'normal',//italic 
                fontStretch: 'normal',//wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
                fontToUpperCase: true

            };

            //var svg3DTagCloud = new SVG3DTagCloud( document.getElementById( 'holder'  ), settings );
            $( '#tag-cloud' ).svg3DTagCloud( settings );

		} );

Adjust the settings object according to your preferences. You can modify parameters like width, height, font styles, colors, and animation speed to match your website’s design.

That’s all! hopefully, you have successfully created Animated 3d Tags Cloud on your website. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X