[JS]ページをめくるアニメーションが楽しい、本のように表示するスクリプト -Viewbook

div要素で配置したコンテンツ（パネル）を自動で重ねて、本のようにページをめくるアニメーションで次々にコンテンツを表示するスクリプトを紹介します。

Viewbook - jQuery Plugin
デモ

[ad#ad-2]

次のページをめくるには三通りの方法が用意されています。

• 「Next」「Previous」で、次・前へ
• ページのナンバリング
  ※違和感がありますが
• キーボードの矢印キー

中でも、キーボードでの操作が楽でいいですね。

Viewbookの実装

各パネル（ページ）はdiv要素のため、画像やテキストなどさまざまな要素が配置できます。

HTML

コンテンツはdiv要素の入れ子で構成されています。
idのmybookは自由に変更できます。

<div id="mybook">
	<div class="vb-load">
		<div>Page 1</div>
		<div>Page 2</div>
		<div>Page 3</div>
		<div>Page 4</div>
	</div>
</div>

外部ファイル

ViewbookはjQueryのプラグインのため「jquery.js」を外部ファイルとして記述します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="viewbook/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="viewbook/jquery.viewbook.1.0.0.min.js" type="text/javascript"></script>
<link href="viewbook/jquery.viewbook.1.0.0.css" type="text/css" rel="stylesheet" media="screen, projection, tv" />

[ad#ad-2]

JavaScript

オプション無しで設置する場合は、下記のようになります。

$("#mybook").viewbook();

オプション有りだと、下記のようになります。

$("#mybook").viewbook({
	width:    800,
	height:   300,
	speed:    500,
	keyboard: false
});

Viewbookのオプション

オプションでは、本全体のサイズやデザイン、アニメーションのスピード、アニメーションの種類、タブの有無とサイズ、各種操作方法などが調整できます。
下記ページでは、その多彩なオプションを試すことができます。

Viewbook -examples