3D球体のタグクラウドを実装 アニメ効果あり「Tag Cloud」
当ページのリンクには広告が含まれています。
スポンサーリンク
3D球体のタグクラウドを実装するプラグイン「Tag Cloud」を紹介します。
jQueryプラグイン「Tag Cloud」
このプラグインを使えば、3D球体のタグクラウドを実装することができます。
しかも、この球体はマウスでくるくる回すアニメ効果付きです。
オプションでは、3D球体のサイズ（高さ、幅、半径）やアニメ効果の速度……などを指定することができます。
スポンサーリンク
それではデモページをご覧ください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="description" content="Tag Cloud のデモでーす。">
<title>Tag Cloud - jQueryプラグイン</title>
<head>
<meta charset="utf-8">
<title>jquery tagcloud</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="tagcloud.jquery.js"></script>
<script>
$(document).ready(function(){
$('#tagcloud').tagoSphere({
height: 300,
width: 300,
radius: 150,
speed: 0.2,
slower: 0.9,
timer: 5,
fontMultiplier: 15
});
});
</script>
<style>
* {
list-style-type: none;
text-decoration: none;
}
</style>
</head>
<body>
<h1>Tag Cloud のデモです。</h1>
<div id="tagcloud">
<ul>
<li><a href="#">jQuery</a></li>
<li><a href="#">Plugin</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">Linux</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">C言語</a></li>
<li><a href="#">buzz</a></li>
<li><a href="#">rex</a></li>
<li><a href="#">bo</a></li>
<li><a href="#">hamm</a></li>
<li><a href="#">slink</a></li>
<li><a href="#">potato</a></li>
<li><a href="#">woody</a></li>
<li><a href="#">sarge</a></li>
<li><a href="#">etch</a></li>
<li><a href="#">lenny</a></li>
<li><a href="#">squeeze</a></li>
<li><a href="#">wheezy</a></li>
</ul>
</div>
</body>
</html>
スポンサーリンク