Press "Enter" to skip to content

3D Tag Cloud to Rotate with the Mouse Plugin | TagCloud.js

TagCloud.js is a standalone JavaScript library for displaying an animated, interactive 3D spherical tag cloud from the set of text strings it offers. It’s 3D TagCloud that rolls with your mouse.

3d word cloud javascript, react tag cloud, animated tag cloud, tag cloud javascript animated word cloud javascript, npm tag cloud, bs tag cloud

Tag Cloud Plugin For jQuery Shows Larger Tags | jquery.tagcloud

How to make use of it:

1. Download and import the TagCloud.js script into the doc.

<script src="./dist/TagCloud.min.js"></script>

2. Define your tags in a JS array.

const myTags = [
      'JavaScript', 'CSS', 'HTML',
      'Angualr', 'VueJS', 'React',
      'Python', 'Go', 'Chrome',
      'Edge', 'Firefox', 'Safari',
];

3. Create a container to hold the tag cloud.

<div class="content"></div>

4. Render a default tag cloud.

var tagCloud = TagCloud('.content', myTags);

5. Config the tag cloud by overriding the default parameters as displayed beneath.

var tagCloud = TagCloud('.content', myTags,{

    // radius in px
    radius: 100,

    // animation speed
    // slow, normal, fast
    maxSpeed: 'normal',
    initSpeed: 'normal',

    // 0 = top
    // 90 = left
    // 135 = right-bottom
    direction: 135,
    
    // interact with cursor move on mouse out
    keep: true
    
});

6. Apply your personal CSS types to the tag cloud.

.tagcloud {
  font-size: 16px;
}

.tagcloud--item {
  padding: 2px 4px;
  background-color: transparent;
  border: 1px solid transparent;
  cursor: pointer;
}

.tagcloud--item:hover {
  background-color: rgba(0,0,0,.1);
  border: 1px solid #333;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  opacity: 1 !important;
  z-index: 100 !important;
}

.light .tagcloud--item {
  color: #fff;
}

.light .tagcloud--item:hover {
  background-color: rgba(255,255,255,.1);
  border: 1px solid #fff;
}

7. Add extra tags to the prevailing tag cloud.

myTags = myTags.concat(['MoreTag']);
tagCloud.update(myTags);

Animated Sphere Tag Cloud, TagCloud JS Plugin/Github


See Demo And Download

 

Official Website(mcc108): Click Here

This superior jQuery/javascript plugin is developed by mcc108. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.