Roundaboutの使い方
Roundaboutの使用方法をご紹介しています。
Roundaboutはターンテーブルのように要素が回転するjQueryプラグインです。
公式サイト
Github
- ※ このライブラリは、jQueryが別途必要です。
- ※ jQueryのバージョンが1.7.2以上で$.easing 1.3プラグインを導入している場合、うまく動作しないことがあります。
| 対応ブラウザ | IE6～10、Firefox、Safari、Chrome、Opera |
|---|---|
| jQuery | バージョン1.2以上 |
| ライセンス | BSD license |
ダウンロードと設置
こちらからダウンロードし解凍します。
解凍したJavaScriptファイルを任意の場所に設置します。
次の要素を<head>内に記述します。
パスは環境により変更してください。
HTML
適用方法
HTML
次のJavaScriptコードを記述します。
JavaScript
オプションの設定
$.roundaboutメソッドの第一引数にハッシュで各種オプションを指定できます。
オプションの種類はオプション一覧をご覧ください。
JavaScript
ドラッグまたはフリックの設定
ドラッグやフリックで回転させる方法です。
実装にはEvent.dragとEvent.dropが必要です。
HTML
JavaScript
オプション一覧
| オプション名 | 初期値 | 説明 |
|---|---|---|
| bearing | 0.0 | 初期の横方向の相対値 |
| tilt | 0.0 | 傾度 |
| minZ | 100 | 最小z-index |
| maxZ | 280 | 最大z-index |
| minOpacity | 0.4 | 最小不透明度 |
| maxOpacity | 1.0 | 最大不透明度 |
| minScale | 0.4 | 最小スケール |
| maxScale | 1.0 | 最大スケール |
| duration | 600 | アニメーション時間 |
| btnNext | null | 次へスライドする要素 |
| btnNextCallback | function() {} | 次へスライドしたときのコールバック関数 |
| btnPrev | null | 前へスライドする要素 |
| btnPrevCallback | function() {} | 前へスライドした時のコールバック関数 |
| btnToggleAutoplay | null | 自動再生の開始と停止の切り替えをする要素 |
| btnStartAutoplay | null | 自動再生を開始するための要素 |
| btnStopAutoplay | null | 自動再生を停止するための要素 |
| easing | "swing" | イージング |
| clickToFocus | true | 要素をクリックするとスライドしてフォーカスをするかどうか |
| clickToFocusCallback | function() {} | 現在の要素以外の要素をクリックしてアニメーションが終了した後のコールバック関数 |
| focusBearing | 0.0 | フォーカスしている軸の位置 |
| shape | "lazySusan" | スライドの形状（参照） |
| debug | false | デバッグモードの切り替え（デバッグモードにするとスライド要素に各情報が表示される。） |
| childSelector | "li" | 対象要素 |
| startingChild | 0 | 初期にフォーカスする要素のインデックス番号 |
| reflect | false | スライドする方向（true = 時計回り、false = 反時計回り） |
| autoplay | false | 自動再生 |
| autoplayInitialDelay | 0 | 自動再生の開始遅延時間 |
| autoplayDuration | 1000 | 自動再生の間隔時間 |
| autoplayPauseOnHover | false | ホバー時に自動再生を停止するかどうか（離れると自動再生が再度開始する） |
| enableDrag | false | ドラッグでスライドするかどうか |
| dropDuration | 600 | ドロップした時のスライドの速度 |
| dropEasing | "swing" | ドロップした時のイージング |
| dropAnimateTo | "nearest" | ドロップした時の吸着する方向 |
| dropCallback | function() {} | ドロップした時のコールバック関数 |
| dragAxis | "x" | ドラッグできる方向 |
| dragFactor | 4 | ドラッグでの移動速度（値が大きいほど移動する要素が少なくなる） |
| responsive | false | レスポンシブに対応するかどうか |
メソッド
任意のタイミングで実行できるメソッドが用意されています。
メソッドの実行は$.roundaboutメソッドの第一引数に文字列でメソッド名を指定します。
JavaScript
| メソッド名 | 説明 |
|---|---|
| setBearing | 初期の横方向の相対値を設定し初期の要素へ瞬時に移動 |
| adjustBearing | 現在の要素から横方向の相対値を与えられた分だけ変更 |
| setTilt | 傾度（角度）を変更 |
| adjustTilt | 現在の傾度（角度）から与えられた分だけ変更 |
| animateToChild | 指定インデックスの要素へ移動 |
| animateToNextChild | 次の要素へ移動 |
| animateToPreviousChild | 前>の要素へ移動 |
| animateBearingToFocus | 初期の横方向の相対値を設定し初期の要素へアニメーションしながら移動 |
| startAutoplay | 自動再生の開始 |
| stopAutoplay | 自動再生の停止 |
| toggleAutoplay | 自動再生の開始と停止 |
| isAutoplaying | 自動再生の状態 戻り値はtrueまたはfalse |
| changeAutoplayDuration | 自動再生の間隔の切り替え |
| relayoutChildren | 要素を初期の位置に戻す |
| getNearestChild | 現在の要素のインデックス番号 |
| getChildInFocus | 現在の要素のインデックス番号 （アニメーション中はfalse） |
詳細はroundaboutの公式ページをご覧ください。
Roundabout Callable Methods
イベント
イベントが用意されています。
$.roundaboutを適用した要素を$.onメソッドを使用して登録します。
JavaScript
| メソッド名 | 説明 |
|---|---|
| animationStart | アニメーションの開始 |
| animationEnd | アニメーションの終了 |
| autoplayStart | 自動再生の開始 |
| autoplayStop | 自動再生の終了 |
| childrenUpdated | 要素が再配置中 |
| reposition | 位置が変化中 |
| moveClockwiseThroughBack | 時計回りで回転している時 |
| moveCounterclockwiseThroughBack | 反時計回りで回転している時 |