Animated Sphere Tag Cloud In Pure JavaScript – TagCloud.js

TagCloud.js is a standalone JavaScript library for rendering an animated, interactive, 3D sphere tag cloud from an array text strings you provide.

How to use it:

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

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

2. Define your tags in a JS array (or String, HTMLElement).

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 below.

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,
    useContainerInlineStyles: true,
    useItemInlineStyles: true,
    containerClass: 'tagcloud',
    itemClass: 'tagcloud--item'
    
});

6. Apply your own CSS styles 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 more tags to the existing tag cloud.

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

Changelog:

v2.4.0 (09/20/2023)

• feat: support HTML as content

v2.3.2 (12/27/2022)

• Added TypeScript types and fixed strange touch behavior.
• Added more options.