簡単にフリップコンテンツを実装する

こんにちは、ウェブラボ技術メモです。

今回は簡単にフリップコンテンツを実装できるプラグイン「jQuery.Flipster」を紹介したいと思います。

フリップコンテンツと聞くと導入に敷居が高そうに聞こえますが、全然そんなことはありません!!すごい簡単に実装できてしまうんです!!

では早速実装していきます。

プラグインは下記よりダウンロードしてください。

・Github
https://github.com/drien/jquery-flipster

まずはjquery本体、jquery.flipsterを動かすのに必要なファイルを読み込ませます。

■外部ファイル読み込み

次にコンテンツ部分を記述します。

下記のように各パネルはリストタグで、それを内包する要素にクラスまたはIDを与えます。

■コンテンツ部分

javascript部分は</body>の上に記述してください。

先ほど与えたクラスまたはIDをここで指定します。

■javascript部分

これだけで実装できちゃうんです。簡単ですね。

せっかくなので用意されているレイアウト4種類全てのDEMOを用意しました。

DEMOはこちら

ぺらぺら、くるくると気持ちよく操作できますね。

しかもこのプラグインはレスポンシブ対応で、スマホでも、タブレットでも同じ動きができます。

また、オプションも色々とあるので自分好みの設定にもできます。(Github参照)

気になる対応ブラウザは、

Chrome
Safari & iOS Safari
Firefox
IE 10+
IE 8-9 (一部サポート)
とのこと、念の為IE 8-9で確認してみましたがこれは対応していないようなものと考えた方がいいですね。

古いブラウザなんて知らない!とにかくサイトをカッコ良くしたい!!と言う人には色々と役立つ機会があるのではないでしょうか?

以上、今回の技術メモでした。

  • このページを共有する