ページや本をめくるアニメーションを表現するBookBlockの使い方

f:id:hoge:20141216231826p:plain

BookBlock: A Content Flip Plugin

BookBlockはページや本をめくるアニメーションを実装できるjQueryプラグインである。すぐに確認できるデモページがあるので参照されたし。

BookBlock: A Content Flip Plugin - Demo 1

使い方だが、まず必要最小限のファイルを<head>で読み込む。

<link rel="stylesheet" href="css/bookblock.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/jquerypp.custom.js"></script>
<script src="js/jquery.bookblock.js"></script>

ページは画像でなくてテキストのみでも構わない

<div id="bb-bookblock" class="bb-bookblock">
<div class="bb-item">1ページ目</div>
<div class="bb-item">2ページ目</div>
<div class="bb-item">3ページ目</div>
</div>
<nav>
<a id="bb-nav-prev" href="#">Previous</a>
<a id="bb-nav-next" href="#">Next</a>
</nav>

最後にBookBlockを呼び出すようJavaScriptを実行する。これは<script>でページに直接記述しても構わないし、別ファイルとして読み込んでも構わない。

$(function() {
$( '#bb-bookblock' ).bookblock({
orientation : 'vertical',
speed : 400,
direction : 'ltr'
});
$( '#bb-nav-prev' ).click(function() {
$( '#bb-bookblock' ).bookblock( 'prev' );
return false;
});
$( '#bb-nav-next' ).click(function() {
$( '#bb-bookblock' ).bookblock( 'next' );
return false;
});
});

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA