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

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

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

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

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

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

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

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

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

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

DEMO

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とか気にせず作れるようになりたいですね！