TagCloud
| 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
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);
React
There is a React Component by Frank-Mayer on npm: @frank-mayer/react-tag-cloud
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).
options.reverseDirection
Type: Boolean
Default: false
Whether to reverse the direction when the mouse controls the direction. Default false.
options.containerClass
Type: String
Default: tagcloud
Css class to be used for the tagcloud container. Default tagcloud
options.itemClass
Type: String
Default: tagcloud--item
Css class to be used for tagcloud items. Default tagcloud--item
options.useContainerInlineStyles
Type: Boolean
Default: true
Add inline styles to the tagcloud container which are required for correct view. When this option is disabled you have to add the css by yourself. Default true
options.useItemInlineStyles
Type: Boolean
Default: true
Add common inline styles to the items which are required for correct view. When this option is disabled you have to add the css by yourself. Default true
options.useHTML
Type: Boolean
Default: false
Add html tags with text.Using this will help you add style on elements. Default false
Instance
tagcloud.update(texts)
Update tag list.
tagcloud.pause()
Pause the tagcloud animation.
tagcloud.resume()
Resume the tagcloud animation.
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
}
});
License
MIT