要素を回転させるjQuery「RoundAbout」

2012.03.24 Category:jQuery Tag:jQuery

スタンダードでは要素が奥行きがあるようにくるくる回転しますが、プラグインで3Dのように回転させたり、要素のまわりを回転させたりといろんなパターンで回転して見せる事ができます。

jQuery「RoundAbout」

まずは、デモをご覧ください。

対応ブラウザ Google Chrome / Safari / Firefox / Opera / InternetExplorer

DEMO

ご覧いただけましたか？　標準は水平方向（横）に動くものとなっています。

基本的な使い方は凄く簡単です。まずはこちらから　RoundAbout　をダウンロードします。

ダウンロード　：　RoundAbout

使い方

1. jQuery本体とRoundAboutファイルをheader内に記述し読み込みます。

/*　jQuery本体　*/
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.7.2/jquery.min.js"></script>

/*　RoundAboutファイル　*/
<script src="js/jquery.roundabout.js"></script>

/*　jQuery本体　*/

ajax/libs/jquery/1.7.2/jquery.min.js"></script>

/*　RoundAboutファイル　*/

2. 続けて下記のように記述します。

<script type="text/javascript">
    $(document).ready(function() {
        $('ul#round').roundabout();
        //ul#roundの部分のid名はお好きな名前に変更してください。
    });
</script>

$(document).ready(function() {

$('ul#round').roundabout();

//ul#roundの部分のid名はお好きな名前に変更してください。

});

</script>

header内には、以上を記述すれば終了です。続いてHTMLの記述です。

3. ulのリスト形式で記入し、回転させたいものをliの中に記入します。

<ul id="myRoundabout">
<li><span>Block 1</span><p>Block 2をクリックしてね</p></li>
<li><span>Block 2</span></li>
<li><span>Block 3</span></li>
<li><span>Block 4</span></li>
<li><span>Block 5</span></li></ul>

<li><span>Block 1</span><p>Block 2をクリックしてね</p></li>

<li><span>Block 2</span></li>

<li><span>Block 3</span></li>

<li><span>Block 4</span></li>

<li><span>Block 5</span></li></ul>

4. あとはCSSで装飾をするだけです。(これは、デモでのCSSです。)

ul#round { list-style: none; padding: 0; height: 25em; margin: 0 auto; }
ul#round li{
      height: 20em;
      width: 26em;
      cursor: pointer;
      background-color: #ccc;
      border: 1px solid #999;
   }
span {display: block; padding: 6em 11em;}

ul#round { list-style: none; padding: 0; height: 25em; margin: 0 auto; }

ul#round li{

height: 20em;

width: 26em;

cursor: pointer;

background-color: #ccc;

border: 1px solid #999;

}

span {display: block; padding: 6em 11em;}

jQuery「RoundAbout」　プラグイン

プラグインを使うと回転方向や3Dのように回転させたりすることが出来ます。

回転方向を扱うShapes

回転方向を扱うShapesを使ったデモ　(縦方向の回転です。)

対応ブラウザ Google Chrome / Safari / Firefox / Opera / InternetExplorer

DEMO

まずは、プラグインをダウンロード

ダウンロード　：　Roundabout Shapes for jQuery

使い方は、基本と一緒ですが、呼び込むファイルが増えます。

/*　jQuery本体　*/
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.7.2/jquery.min.js"></script>

/*　RoundAboutファイル　*/
<script src="js/jquery.roundabout.js"></script>
/*　この一行を付け足す　*/
<script src="js/jquery.roundabout-shapes.js"></script>

/*　jQuery本体　*/

ajax/libs/jquery/1.7.2/jquery.min.js"></script>

/*　RoundAboutファイル　*/

/*　この一行を付け足す　*/

続けて書く部分も一緒ですが、縦方向の動作を付け足して記述してあげます。

<script type="text/javascript">
    $(document).ready(function() {
        $('ul#round').roundabout();
        //ul#roundの部分のid名はお好きな名前に変更してください。
/*　この一行を付け足す　*/
　　　　shape: 'waterWheel'//縦方向
    });
</script>