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.

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']);

Read More – Dynamic Tag Cloud Generator With Pure JavaScript | tagsCloud.js

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 Usage, please go to the official website.