本のようにめくる動きが実装できる BookBlock の使い方

公開日：2014年1月3日

posts_photo
BOOKBLOCK: A CONTENT FLIP PLUGIN

本をめくるようなアニメーションを実装出来るプラグインはいくつかありますが、僕はこのBookBlockが一番好みでした。ページのちょっとした仕掛けとしていかがでしょう。サイト内に絵本みたいなコンテンツを置く時に使えそうですね。

必要なものを公式からダウンロードして読み込む

まずは必要なものを公式サイトBOOKBLOCK: A CONTENT FLIP PLUGINからダウンロードします。ここにデモも入っているのでそのファイルから改変していっても普通に使う事は出来ますが、ここでは最低限必要そうな部分のみ紹介しようと思います。
まず読み込むものは以下のとおりです。

<head>
<link rel="stylesheet" type="text/css" href="css/bookblock.css" />
<script src="js/modernizr.custom.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquerypp.custom.js"></script>
<script src="js/jquery.bookblock.js"></script>
</head>

こちらデモだとjquery以下の3つはhtmlの表示を早くするためにbodyの終わりに書いてありますが、わかりやすくするため全部head内に入れて紹介しようと思います。

htmlに書き込む内容

htmlに書き込む内容は下記の通りです。本当の最低限としてはbb-bookblockで囲っている部分だけでも良いのですが、それだとめくるためのボタンが無くなってしまうのでナビゲーションも記述しておきます。
bb-item内が１ページ分にあたります。bb-item内にはテキストでも画像でもだいたい何を入れても大丈夫そうです。ただ、後ほど記述するcssで指定した範囲から出てしまう大きさのコンテンツだとめくる際にうまく表示されてくれないので注意です。 

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

<nav>
<a id="bb-nav-first" href="#" >First page</a>
<a id="bb-nav-prev" href="#" >Previous</a>
<a id="bb-nav-next" href="#" >Next</a>
<a id="bb-nav-last" href="#" >Last page</a>
</nav>

Javascriptでの関数の設定

htmlを記述したら、次は関数を設定します。最低限呼び出す関数は一行ですが、実際に使うとなると他にもいくつか記述する必要があります。オプションについてはいくつかよく使いそうな設定を書きますが、もっとたくさんあるので詳しくは公式で見るのをお勧めします。 

$(function() {
//オプションを使わずデフォルトで良い場合は $( '#bb-bookblock' ).bookblock(); だけで大丈夫
$( '#bb-bookblock' ).bookblock( {
  orientation : 'vertical', //横にめくるか縦にめくるかを設定
  speed : 800, //めくるスピードの設定
  shadowFlip : 0.7, //めくる際につける影の設定
  direction : 'ltr' //右開きか左開きかを設定
} );
		  
//ナビゲーションを設定
$( '#bb-nav-next' ).on( 'click', function() {
  $( '#bb-bookblock' ).bookblock( 'next' );
  return false;
});

$( '#bb-nav-prev' ).on( 'click', function() {
  $( '#bb-bookblock' ).bookblock( 'prev' );
  return false;
});

$( '#bb-nav-first' ).on( 'click', function() {
  $( '#bb-bookblock' ).bookblock( 'first' );
  return false;
});

$( '#bb-nav-last' ).on( 'click', function() {
  $( '#bb-bookblock' ).bookblock( 'last' );
  return false;
});

});

ここではナビゲーション部分は、クリック時にめくるようにしていますがマウスオーバーやスクロールでめくれるように設定しても面白いものが出来るかもしれないですねー。

CSSの設定

最後にCSSの設定です。こちらはデモに入っている boobblock.css を必要に合わせて少しだけ改変します。このファイルの1行目にかかれているbb-boobblockのスタイルで幅と高さを好みの値に変更すると良いでしょう。めくる際の奥行きまで調節したい場合はperspectiveを変更すれば大丈夫です。 

.bb-bookblock {
	width: 400px; //コンテンツを表示する幅の指定
	height: 300px;　//コンテンツを表示する高さの指定
	margin: 0 auto;
	position: relative;
	z-index: 100;
	-webkit-perspective: 1300px;
	-moz-perspective: 1300px;
	perspective: 1300px;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

以上、参考になれば幸いです。
では！

Web制作の現場で使う jQueryデザイン入門［改訂新版] (アスキー書籍)
Web制作の現場で使う jQueryデザイン入門［改訂新版] (アスキー書籍)
ー Amazon.co.jpで買う

”jQuery”タグの他の記事を見る