FullscreenBookBlock：ページめくりを導入する方法｜DAD UNION

過去にページめくり系プラグイン
「pageflip.jsを使って本の様にページめくりを導入する方法」
「JavaScriptを使って本の様にページめくりを導入する方法【FlipboardPageLayout】」
をご紹介しましたが、今回は別パターンのページめくりを導入する方法をご紹介します。

Contents

ページめくりを導入するための読み込むCSSファイル
ページめくりを導入するためのHTMLの記述
FullscreenBookBlock：ページめくりを導入するためのJavaScriptの記述
FullscreenBookBlock：ページめくりを導入したデモページ
ソース元：Fullscreen Pageflip Layout with BookBlock

ページめくりを導入するための読み込む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">&larr;</span>
                    <span id="bb-nav-next">&rarr;</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>