[JS]複数のエレメントをターンテーブルのようにぐるぐる回すスクリプト -Roundabout

リスト要素などのネストされたHTMLの要素をユーザーの操作でターンテーブルのようにぐるぐる回転させることができるjQueryのプラグインを紹介します。

サイトのキャプチャ

Roundabout

Roundaboutのデモ

デモのキャプチャ

デモページ

デモではたくさんのぐるぐる回るのがあります。
その中からいくつか下記にご紹介。

デモのキャプチャ

デモ:Standard
スクリプトの動作が分かるスタンダードなデモ。

デモのキャプチャ

デモ:Images
ただのボックスを画像に置き換えたデモ。

デモのキャプチャ

デモ:Slideshow Facade
画像の切り替えを短冊状のアニメーションで行うスライドショー。

デモのキャプチャ

デモ:3D Effect
3D状に回転するデモ。

デモのキャプチャ

デモ:Around Other Things
回転の中心に他のエレメントを置いたデモ。

Roundaboutの使い方

Roundabouの実装方法を簡単に紹介します。
詳しい実装方法については「Learn」をご覧ください。

HTML

ぐるぐる回転させる各エレメントをリスト要素で実装します。

<ul>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
</ul> 

外部ファイル

jquery.js」と当スクリプトを外部ファイルとして記述します。

<script src="jquery.js"></script>
<script src="jquery.roundabout.js"></script> 

JavaScript

jQueryのセレクタで指定し、Roundaboutを実行します。

<script>
   $(document).ready(function() {
      $('ul').roundabout();
   });
</script>

CSS

スタイルシートはまずは、下記のものを使用してみてください。
もちろん、カスタマイズして利用しても構いません。

   .roundabout-holder {
      list-style: none;
      padding: 0;
      margin: 0;
      height: 5em;
      width: 5em;
   }
   .roundabout-moveable-item {
      height: 4em;
      width: 4em;
      cursor: pointer;
      background-color: #ccc;
      border: 1px solid #999;
   }
   .roundabout-in-focus {
      cursor: auto;
   }
</style> 

top of page

©2017 coliss