ページをめくる表現をつけるjQueryプラグイン「turn.js」

ページをめくる表現をつけるjQueryプラグイン「turn.js」サンプル ページをめくるような表現付けたくなる時ありますよね。
そんな時はturn.js - The page flip effect for HTML5を利用すると簡単に実現できます。
スマホ、タブレット対応していますが、HTML5なので一部のIEには非対応です。

使用方法 turn.jsからファイル一式をダウンロード。
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="turn.min.js"></script>
<script>
$(function(){
$('#magazine').turn();
});
</script>

上記のようにJavaScriptを記述したら、見開きなどのサイズを指定します。
<style>
#magazine{
width:800px; //全体幅
height:400px; //全体の高さ
}
#magazine .turn-page{
width:400px; //1ページ分の幅
height:400px; //1ページ分の高さ
}
</style>

あとは要素を記述すれば完成です。
<div id='magazine'>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
<div> Page 4 </div>
<div> Page 5 </div>
<div> Page 6 </div>
</div>

ページをめくる表現をつけるjQueryプラグイン「turn.js」サンプル

sponsors

「ページをめくる表現をつけるjQueryプラグイン「turn.js」」をシェアする

記事作成:
記事URL:

TOP > > > ページをめくる表現をつけるjQueryプラグイン「turn.js」