Animated Sphere Tag Cloud In Pure JavaScript – TagCloud.js

Category: Javascript | November 7, 2019
Author: mcc108
Views Total: 19
Official Page: Go to website
Last Update: November 7, 2019
License: MIT

Preview:

Animated Sphere Tag Cloud In Pure JavaScript – TagCloud.js

Description:

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.

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
    
});

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

You Might Be Interested In:


Leave a Reply