過去にページめくり系プラグイン
「pageflip.js：本の様にページめくりを導入する方法」
「JavaScriptを使って本の様にページめくりを導入する方法【FlipboardPageLayout】」
をご紹介しましたが、今回は別パターンのページめくりを導入する方法をご紹介します。
Contents
ディスプレイ広告
ページめくりを導入するための読み込むCSSファイル
※jquery.jscrollpane.custom.css、bookblock.css、custom.cssファイルを読み込みます。必要に応じて変更して下さい。
<link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.custom.css" />
<link rel="stylesheet" type="text/css" href="css/bookblock.css" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<style>
h3{
font-size: 14px !important;
}
</style>
ページめくりを導入するためのHTMLの記述
※4ページ（#item1～#item4）用意してます。左右矢印（←、→）クリック、左右スワイプ、メニューリンクでページめくりが行えます。必要に応じて変更して下さい。
<div id="container" class="container">
<div class="menu-panel">
<h3>左右矢印（←、→）クリック、左右スワイプ、メニューリンクでページめくりが行えます。</h3>
<ul id="menu-toc" class="menu-toc">
<li class="menu-toc-current"><a href="#item1">1ページ</a></li>
<li><a href="#item2">2ページ</a></li>
<li><a href="#item3">3ページ</a></li>
<li><a href="#item4">4ページ</a></li>
</ul>
</div>
<div class="bb-custom-wrapper">
<div id="bb-bookblock" class="bb-bookblock">
<div class="bb-item" id="item1">
<div class="content">
<div class="scroller">
<h2>1ページ目</h2>
<p>1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。1ページ目のテキストです。</p>
</div>
</div>
</div>
<div class="bb-item" id="item2">
<div class="content">
<div class="scroller">
<h2>2ページ目</h2>
<p>2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。2ページ目のテキストです。</p>
</div>
</div>
</div>
<div class="bb-item" id="item3">
<div class="content">
<div class="scroller">
<h2>3ページ目</h2>
<p>3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。3ページ目のテキストです。</p>
</div>
</div>
</div>
<div class="bb-item" id="item4">
<div class="content">
<div class="scroller">
<h2>4ページ目</h2>
<p>4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。4ページ目のテキストです。</p>
</div>
</div>
</div>
</div>
<nav>
<span id="bb-nav-prev">←</span>
<span id="bb-nav-next">→</span>
</nav>
<span id="tblcontents" class="menu-button">メニュー</span>
</div>
</div><!-- /container -->
FullscreenBookBlock：ページめくりを導入するためのJavaScriptの記述
※modernizr.custom.79639.js、jquery.min.js、jquery.mousewheel.js、jquery.jscrollpane.min.js、jquerypp.custom.js、jquery.bookblock.js、page.jsファイルを読み込みます。Page.init()で用意した4ページ（#item1～#item4）のページめくりが出来る様になります。
<script src="js/modernizr.custom.79639.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/jquery.jscrollpane.min.js"></script>
<script src="js/jquerypp.custom.js"></script>
<script src="js/jquery.bookblock.js"></script>
<script src="js/page.js"></script>
<script>
$(function() {
Page.init();
});
</script>
FullscreenBookBlock：ページめくりを導入したデモページ
FullscreenBookBlock：ページめくりを導入したデモページ
ソース元：Fullscreen Pageflip Layout with BookBlock
以下がソース元サイトです。
Fullscreen Pageflip Layout with BookBlock
※流用される場合は自己責任でお願いします。
デモページ
ディスプレイ広告
ディスプレイ広告
