こんにちは。
今回は本のようにページをパラパラめくる事ができるjQueryプラグイン「turn.js」！です。
画像を本のようにページをパラパラめくるような機能を実装するのにjQueryプラグイン「turn.js」を使ってみたので紹介したいと思います。
本のようにページをパラパラめくる事ができるjQueryプラグイン「turn.js」！
turn.js
jQueryプラグイン「turn.js」をダウンロード
「turn.js」のサイトの「Download」のボタンをクリックしてダウンロードします。
jQueryプラグイン「turn.js」の使い方
html部分を記述します。
1 2 3 4 5 6 7 8 9 10 11 12 | <div id="flipbook"> <div><img src="img/1.png" alt=""></div> <div><img src="img/2.png" alt=""></div> <div><img src="img/3.png" alt=""></div> <div><img src="img/4.png" alt=""></div> <div><img src="img/5.png" alt=""></div> <div><img src="img/6.png" alt=""></div> <div><img src="img/7.png" alt=""></div> <div><img src="img/8.png" alt=""></div> <div><img src="img/9.png" alt=""></div> <div><img src="img/10.png" alt=""></div> </div> |
jQuery本体とturn.min.jsを/bodyの手前に読み込みます。
1 2 | <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/turn.min.js"></script> |
その下に下記のスクリプトを記述します。
widthとheightはサイトに合わせて変更して下さい。
1 2 3 4 5 6 7 8 9 | <script type="text/javascript"> $(function(){ $('#flipbook').turn({ width:1000, height:600, autoCenter: true }); }); </script> |
プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート
いかがでしたか。今回は画像でやってみましたが、テキストでもページでもできるみたいですね。
以上で本のようにページをパラパラめくる事ができるjQueryプラグイン「turn.js」！でした。
本をめくるようなエフェクトを実装できるjQueryプラグインをまとめた記事はこちら
本をめくるようなエフェクトを実装できるjQueryプラグインまとめ！こんにちは。
今回は本をめくるようなエフェクトを実装できるjQueryプラグインまとめ！です。
Webサイトに本をめくるような動きをつけ...
