[JS]シャドウにもこだわった、滑らかで美しいアニメーションでページをめくるスクリプト -BookBlock

画像でもテキストのコンテンツでも使用できるページめくりのアニメーションが滑らかなjQueryのプラグインを紹介します。
デスクトップのクリック操作だけでなく、iPhone, iPadのスワイプ操作でもページをめくれます。

BookBlock: A Content Flip Plugin
BookBlick -GitHub

• BookBlockのデモ
• BookBlockの使い方

BookBlockのデモ

デモは3種類あります。
まずは、ごくシンプルなものから。

Demo 1

下部の矢印アイコンをクリックすると、ページめくりです。
ページめくりのアニメーションも美しいですが、シャドウのアニメーションも注目です。

Demo 1

最後のページにも細かいエフェクトが仕込まれています。
もうめくれないよと、プルプルするだけですｗ

Demo 1

Demo 2は、コンテンツを複数設置し、ナビゲーションのタイプが異なります。

Demo 2

Demo 3は、ページのレイアウトを複雑にしたものです。
画像だけでなく、見出しやパラグラフも普通に実装するだけで適用できます。

Demo 3

BookBlockの使い方

Step 1: 外部ファイル

「jquery.js」と当スクリプト、そしてスワイプイベント用に「jquery++」を外部ファイルとして記述します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquerypp.custom.js"></script>
<script type="text/javascript" src="js/jquery.bookblock.js"></script>

Step 2: HTML

各ページはdiv要素で実装し、それらをdiv要素で内包します。

<div id="bb-bookblock" class="bb-bookblock">
	<div class="bb-item">
		<!-- custom content -->
	</div>
	<div class="bb-item">
		<!-- custom content -->
	</div>
	...
	...
</div>

Step 3: JavaScript

jQueryのセレクタでコンテンツを指定し、スクリプトを実行します。

<script type="text/javascript">
$(function() {
	$('#bb-bookblock').bookblock();
});
</script>

スクリプトのオプション

オプションではページめくりの設定が細かく調整できます。

speed

ページめくりのスピード

easing

アニメーションの種類

shadows

シャドウの有無

shadowSides

シャドウの不透明度

shadowFlip

反転してるページのシャドウの不透明度

perspective

奥行き

circular

最後のページの後に最初を表示

nextEl

nextのセレクタ

prevEl

prevのセレクタ

onEndFlip

ページめくりのアニメーション後のコールバック

onBeforeFlip

ページめくりのアニメーション前のコールバック