スタンダードでは要素が奥行きがあるようにくるくる回転しますが、プラグインで3Dのように回転させたり、要素のまわりを回転させたりといろんなパターンで回転して見せる事ができます。
jQuery「RoundAbout」
まずは、デモをご覧ください。
ご覧いただけましたか? 標準は水平方向(横)に動くものとなっています。
基本的な使い方は凄く簡単です。 まずはこちらから RoundAbout をダウンロードします。
使い方
1. jQuery本体とRoundAboutファイルをheader内に記述し読み込みます。
1 2 3 4 5 6 |
/* 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> |
2. 続けて下記のように記述します。
1 2 3 4 5 6 |
<script type="text/javascript"> $(document).ready(function() { $('ul#round').roundabout(); //ul#roundの部分のid名はお好きな名前に変更してください。 }); </script> |
header内には、以上を記述すれば終了です。 続いてHTMLの記述です。
3. ulのリスト形式で記入し、回転させたいものをliの中に記入します。
1 2 3 4 5 6 |
<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> |
4. あとはCSSで装飾をするだけです。(これは、デモでのCSSです。)
1 2 3 4 5 6 7 8 9 |
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を使ったデモ (縦方向の回転です。)
まずは、プラグインをダウンロード
使い方は、基本と一緒ですが、呼び込むファイルが増えます。
1 2 3 4 5 6 7 8 |
/* 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> |
続けて書く部分も一緒ですが、縦方向の動作を付け足して記述してあげます。
1 2 3 4 5 6 7 8 |
<script type="text/javascript"> $(document).ready(function() { $('ul#round').roundabout(); //ul#roundの部分のid名はお好きな名前に変更してください。 /* この一行を付け足す */ shape: 'waterWheel'//縦方向 }); </script> |
その他にも、上に書いてあるダウンロードサイトへいくと斜め方向などのいろいろな回転について書かれています。 続けて書く部分を変更してあげるだけで、3Dや斜め方向の動きなどが出来ます。
上記のデモは、こちらからダウンロードできます。