[JS]アニメーションを使った快適操作がすごい！レスポンシブ対応のフリップコンテンツを実装する軽量スクリプト -jQuery Flipster
Post on:2016年1月15日
sponsors
レスポンシブ対応、タッチデバイス対応、CSS3アニメーションを使った快適操作が気持ちいいさまざまなフリップコンテンツが実装できる軽量（5kb）のスクリプトを紹介します。
パタパタ、クルクル、ペラペラ、本当に気持ちよく動きます。
jQuery Flipsterのデモ
対応ブラウザは、Chrome, Safari, iOS Safari, Firefox, IE10+で、IE8/9は一部サポートです。
デスクトップでもスマホでもタブレットでもOKです。
デモは4種類あり、それぞれアニメーションGIFにしてみました。
驚くほど気持ちよく操作できるので、ぜひ実際のデモページでお楽しみください。
操作はマウス・キーボード（矢印キー）・トラックパッド・タッチスクリーンに優しく、ホイール・タップ・スワイプにも対応しています。
スライダー機能も備えたカルーセル、はじめて見ました！ 面白いですね。
ホイールさせるスピードで動きが変化します。
コマを落としているので見えにくいですが、フェードがいい感じです。
jQuery Flipsterの使い方
Step 1: 外部ファイル
当スタイルシートとスクリプト、jquery.jsを外部ファイルとして記述します。
|
1 2 3 4 5 6 7 8 9 10 11 |
<head> ... <link rel="stylesheet" href="css/flipster.min.css"> </head> <body> ... コンテンツ ... <script src="/js/jquery.min.js"></script> <script src="/js/jquery.flipster.min.js"></script> </body> |
Step 2: HTML
各パネルはリストで、それを内包する要素に「.my-flipster」を与えます。
|
1 2 3 4 5 6 7 |
<div class="my-flipster"> <ul> <li><img src="" /></li> <li><p>Plain ol' <abbr>HTML</abbr>!</p></li> ... </ul> </div> |
Step 3: JavaScript
ラッパーをjQueryのセレクタで指定し、スクリプトを実行します。
|
1 2 3 |
<script> $('.my-flipster').flipster(); </script> |
オプションでは、さまざまな設定をおこなえます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
$('.my-flipster').flipster({ itemContainer: 'ul', // アイテムのコンテナ itemSelector: 'li', // アイテムのセレクタ start: 'center', // アイテムの初期表示 fadeIn: 400, // フェードインのスピード loop: false, // ループの有無 autoplay: false, // 自動再生の有無 pauseOnHover: true, // 自動再生時のポーズの有無 style: 'coverflow', // スタイル（coverflow|carousel|flat|...） spacing: -0.6, // アイテム間のスペース click: true, // アイテムのクリック操作の有無 keyboard: true, // キーボード操作（矢印キー）の有無 scrollwheel: true, // ホイール操作の有無 touch: true, // タッチデバイスのスワイプ操作の有無 nav: false, // ナビゲーションの有無と位置 buttons: false, // ボタンの有無 buttonPrev: 'Previous', // ボタンの文言 buttonNext: 'Next', // ボタンの文言 onItemSwitch: false // アイテムがスイッチした時のコールバック関数 }); |
sponsors
