AoleiC / TagCloud

☁️ 3D TagCloud.js rotating with mouse

English | 中文

TagCloud.js

It's 3D TagCloud that rolling with the mouse. It's only 6KB in minsize and doesn't depend on other libraries. Examples

• Usage
  • npm
  • Browser
• Constructor
  • TagCloud(container, texts, options)
    • container
    • texts
    • options
      • options.radius
      • options.maxSpeed
      • options.initSpeed
      • options.direction
      • options.keep
• Instance
  • tagcloud.update(texts)
  • tagcloud.destroy()
• Custom event handler
  • Use event delegation bind event listener to TagCloud instance root element
• Custom style
  • Add custom colors to TagCloud sub-item
• License

Usage

npm

$ npm i -S TagCloud

const TagCloud = require('TagCloud');

const container = '.tagcloud';
const texts = [
    '3D', 'TagCloud', 'JavaScript',
    'CSS3', 'Animation', 'Interactive',
    'Mouse', 'Rolling', 'Sphere',
    '6KB', 'v2.x',
];
const options = {};

TagCloud(container, texts, options);

Browser

<!-- html -->
<script type="text/javascript" src="./dist/TagCloud.min.js"></script>

TagCloud(container, texts, options);

Constructor

TagCloud(container, texts, options)

Returns tagcloud instance.

container

Type: String or HTMLElement or Array

Container for constructing a tagcloud.

texts

Type: Array

List of tag text for init.

options

Type: Object

options.radius

Type: Number
Default: 100
Unit: px

Rolling radius.

options.maxSpeed

Optional: 'slow', 'normal', 'fast'
Default: 'normal'

Rolling max speed.

options.initSpeed

Optional: 'slow', 'normal', 'fast'
Default: 'normal'

Rolling init speed.

options.direction

Type: Number
Default: 135 (right-bottom)
Unit: clockwise deg

Rolling init direction, e.g. 0 (top) , 90 (left), 135 (right-bottom) ...

options.keep

Type: Boolean
Default: true

Whether to keep rolling after mouse out area. Default true (decelerate to rolling init speed, and keep rolling with mouse).

Instance

tagcloud.update(texts)

Update tag list.

tagcloud.destroy()

Destroy the tagcloud instance.

Custom event handler

Use event delegation bind event listener to TagCloud instance root element

The following is an example, click the TagCloud sub-item to jump to Google to search for keywords.

let rootEl = document.querySelector('.content');
rootEl.addEventListener('click', function clickEventHandler(e) {
    if (e.target.className === 'tagcloud--item') {
        window.open(`https://www.google.com/search?q=${e.target.innerText}`, '_blank');
        // your code here
    }
});

Custom style

Add custom colors to TagCloud sub-item

The following is an example, TagCloud sub-item is in green font, and when it is moved to it, it becomes red.

First, add an extra class to the container (the container used to construct TagCloud, the container in this example is called content), such as diy.

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

.diy .tagcloud--item {
    color: #67C23A;
}

.diy .tagcloud--item:hover {
    color: #F56C6C;
}

License

MIT