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

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

デモのキャプチャ

BookBlock: A Content Flip Plugin
BookBlick -GitHub

BookBlockのデモ

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

デモのキャプチャ

Demo 1

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

デモのキャプチャ

Demo 1

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

デモのキャプチャ

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
ページめくりのアニメーション前のコールバック

sponsors

top of page

©2024 coliss