過去にページめくり系プラグイン
「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
※流用される場合は自己責任でお願いします。
デモページ