turn.jsを使った本をめくるようなコンテンツページ

turn.jsというプラグインを使って、

コンテンツを本をめくったように遷移するページを作ってみました。

ちなみにHTML5でしか使用できないようです。

コーポレートサイトで使用するのも特徴があっていいと思いますが、

電子書籍のアプリに使用できるかもしれません。

というか本家ではそのようなデモがありました。

簡単ではありますが、デモを作成したので、

まずはそちらをご覧頂ければと思いますが、

IEでは見れないので、FirefoxかChromeでご覧ください。

四隅の角でページ送りができ、ドラッグでページをめくるような動きもできます。

turn.jsの使用方法

まずは、head部分に、

XHTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="js/turn.js"></script>

1
2

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/turn.js"></script>

記入します。

そしてhtmlは、

XHTML

<div id="magazine"> 　<div></div> 　<div></div> 　<div></div> 　<div></div> 　<div></div> </div>

1
2
3
4
5
6
7

<div id="magazine">
　<div></div>
　<div></div>
　<div></div>
　<div></div>
　<div></div>
</div>

奇数番目が、右側のページ(1番目は表紙)で、

偶数番目が、左側のページになります。

最後が重要なのですが、bodyの閉じタグの直前に、

JavaScript

<script> $('#magazine').turn(); </script>

1
2
3

<script>
$('#magazine').turn();
</script>

を入れるだけです。

要はコンテンツの後に記述しないと動きません。

ここは気をつけて下さい。

デモでもこれしか記述してませんが、オプションがあります。

また、自分で作ることになりますが、javascriptで

ページ数を表示したり、メニューをつけたりできるようです。

今回そこまで余裕がなかったので、

割愛させていただきました。

海外のサイトですがメニュー付きのデモは以下になります。

http://www.turnjs.com/

冒頭で紹介した、電子書籍のデモは以下になります。

電子書籍のようなページ

IEとか気にせず作れるようになりたいですね！

WRITER

スターフィールド編集部