[JS]アニメーションを使った快適操作がすごい!レスポンシブ対応のフリップコンテンツを実装する軽量スクリプト -jQuery Flipster

レスポンシブ対応、タッチデバイス対応、CSS3アニメーションを使った快適操作が気持ちいいさまざまなフリップコンテンツが実装できる軽量(5kb)のスクリプトを紹介します。

パタパタ、クルクル、ペラペラ、本当に気持ちよく動きます。

デモのキャプチャ

jQuery Flipster -GitHub

jQuery Flipsterのデモ

対応ブラウザは、Chrome, Safari, iOS Safari, Firefox, IE10+で、IE8/9は一部サポートです。
デスクトップでもスマホでもタブレットでもOKです。

デモのキャプチャ

デモページ

デモは4種類あり、それぞれアニメーションGIFにしてみました。
驚くほど気持ちよく操作できるので、ぜひ実際のデモページでお楽しみください。

デモのアニメーション

デモ: カバーフロー

操作はマウス・キーボード(矢印キー)・トラックパッド・タッチスクリーンに優しく、ホイール・タップ・スワイプにも対応しています。

デモのアニメーション

デモ: カルーセル

スライダー機能も備えたカルーセル、はじめて見ました! 面白いですね。

デモのアニメーション

デモ: ホイール

ホイールさせるスピードで動きが変化します。

デモのアニメーション

デモ: フラット

コマを落としているので見えにくいですが、フェードがいい感じです。

jQuery Flipsterの使い方

Step 1: 外部ファイル

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

Step 2: HTML

各パネルはリストで、それを内包する要素に「.my-flipster」を与えます。

Step 3: JavaScript

ラッパーをjQueryのセレクタで指定し、スクリプトを実行します。

オプションでは、さまざまな設定をおこなえます。

top of page

©2016 coliss