今日の人気記事

  1. テーブルのヘッダーを固定してデータ行をスクロール表示「tbodyScroll」
  2. JSONデータからテーブルを表示「Columns」 - ソート - 検索 - ページャー
  3. テキストの手動入力っぽいアニメーションを実装「TypeType」
  4. レスポンシブ・グリッドを実装「Awesome Grid」
  5. スクロールすると自動でコンテンツを読み込む「PageMe」

3D球体のタグクラウドを実装 アニメ効果あり「Tag Cloud」

スポンサーリンク

3D球体のタグクラウドを実装するプラグイン「Tag Cloud」を紹介します。

jQueryプラグイン「Tag Cloud」

このプラグインを使えば、3D球体のタグクラウドを実装することができます。

しかも、この球体はマウスでくるくる回すアニメ効果付きです。

オプションでは、3D球体のサイズ(高さ、幅、半径)やアニメ効果の速度……などを指定することができます。

スポンサーリンク

それではデモページをご覧ください。

「Tag Cloud」のデモ

デモのソース(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>
スポンサーリンク

関連記事(一部広告含む)