Animated Tag Cloud Generator With Pure JavaScript – tagsCloud.js

tagsCloud.js is a small, dependency-free JavaScript library to generate a dynamic, animated tag cloud from a series of links.

How to use it:

Create your own links for the tag cloud.

<div id="tagscloud">
  <a href="#" class="tagc1" style="left: 113.554px; top: 30.1925px; z-index: 102; opacity: 0.118615; display: none;">jQuery</a>
  <a href="#" class="tagc3" style="left: 136.828px; top: 34.752px; z-index: 102; opacity: 0.111076; color: rgb(255, 255, 255); padding: 5px; display: none;">CSS</a>
  <a href="#" class="tagc3" style="left: 95.415px; top: 30.9076px; z-index: 103; opacity: 0.119797; color: rgb(255, 255, 255); padding: 5px; display: none;">Script</a>
  <a href="#" class="tagc1" style="left: 58.2577px; top: 45.3038px; z-index: 107; opacity: 0.181538; color: rgb(255, 255, 255); padding: 5px;">JavaScript</a>
  <a href="#" class="tagc3" style="left: 65.4534px; top: 42.9294px; z-index: 119; opacity: 0.389813; color: rgb(255, 255, 255); padding: 5px;">CSS</a>
  <a href="#" class="tagc2" style="left: 108.202px; top: 30.0199px; z-index: 102; opacity: 0.117901; color: rgb(255, 255, 255); padding: 5px; display: none;">CSS3</a>
  ...
</div>

Download and include the tagsCloud.js in the web page.

<script src="tagsCloud.js"></script>

The CSS to style the tag clouds.

#tagscloud {
  width: 250px;
  height: 260px;
  position: relative;
  font-size: 12px;
  color: #333;
  margin: 20px auto 0;
  text-align: center;
}
#tagscloud a {
  position: absolute;
  top: 0px;
  left: 0px;
  color: #333;
  font-family: Arial;
  text-decoration: none;
  margin: 0 10px 15px 0;
  line-height: 18px;
  text-align: center;
  font-size: 12px;
  padding: 1px 5px;
  display: inline-block;
  border-radius: 3px;
}
#tagscloud a.tagc1 {
  background: #666;
  color: #fff;
}
#tagscloud a.tagc2 {
  background: #F16E50;
  color: #fff;
}
#tagscloud a.tagc3 {
  background: #006633;
  color: #fff;
}
#tagscloud a:hover {
  color: #fff;
  background: #0099ff;
}