JavaScriptを使って本の様にページめくりを導入する方法【FlipboardPageLayout】｜DAD UNION

JavaScriptを使って本の様にページめくりをする方法をご紹介します。ページ中央を境に左右ページめくりを導入してみます。

今回使用するJavaScriptライブラリやプラグインは以下の通りです。

modernizr.custom.08464.js
jquery.min.js（v1.7.2）
query.tmpl.min.js
jquery.history.js
core.string.js
jquery.touchSwipe-1.2.5.js
jquery.flips.js

Contents

本の様にページめくりを導入するCSSファイルの読み込み
使って本の様にページめくりを導入するJavaScriptの（headタグ内）記述例
本の様にページめくりを導入するHTMLの記述例
本の様にページめくりを導入するJavaScript（body終了タグ直前）の記述
FlipboardPageLayout：メージめくりを導入したデモページ
ソース元：Experimental Page Layout Inspired by Flipboard
まとめ

本の様にページめくりを導入するCSSファイルの読み込み

ページ全体、「次へ」ボタン、ロゴ位置等のCSSを記述してます。必要に応じて変更して下さい。

<link rel="stylesheet" type="text/css" href="css/style.css" />

使って本の様にページめくりを導入するJavaScriptの（headタグ内）記述例

modernizr.custom.08464.jsファイルを読み込みます。切り替わりページのページテンプレート（id=”pageTmpl”）を用意します。

		<script type="text/javascript" src="js/modernizr.custom.08464.js"></script>
		<script id="pageTmpl" type="text/x-jquery-tmpl">
			<div class="${theClass}" style="${theStyle}">
				<div class="front">
					<div class="outer">
						<div class="content" style="${theContentStyleFront}">
							<div class="inner">{{html theContentFront}}</div>
						</div>
					</div>
				</div>
				<div class="back">
					<div class="outer">
						<div class="content" style="${theContentStyleBack}">
							<div class="inner">{{html theContentBack}}</div>
						</div>
					</div>
				</div>
			</div>			
		</script>

本の様にページめくりを導入するHTMLの記述例

以下、ページ内要素の説明です。必要に応じて変更して下さい。
header（class=main-title）：スタートページ（表紙の前）
f-cover：表紙
f-page：各ページ
f-cover-back：裏表紙

		<header class="main-title">
			<h1>ページ中央を境に左右めくりが可能です。</h1>
		</header>
		
		<div id="flip" class="container">
		
			<div class="f-page f-cover">
				<div class="cover-elements">
					<p style="font-size:30px;">右端「&lt; 次へ」辺りでマウスを右から左にめくって（移動）みて下さい。</p>
				</div>
				<div class="f-cover-flip">&lt; 次へ</div>
			</div>
			
			<div class="f-page">
				<div class="f-title">
					<h2>1ページ目見出し</h2>
				</div>
				<div class="box" style="font-size:100px;">
                1ページ目です。←クリックしてみて下さい。
                <p style="font-size:20px; padding-top:15px;">左右端辺りでマウスを右から左・左から右にめくって（移動）みて下さい。</p>
				</div>
			</div>
			
			<div class="f-page">
				<div class="f-title">
					<h2>2ページ目見出し</h2>
				</div>
				<div class="box" style="font-size:100px;">
                2ページ目です。←クリックしてみて下さい。
                <p style="font-size:20px; padding-top:15px;">左右端辺りでマウスを右から左・左から右にめくって（移動）みて下さい。</p>
				</div>
			</div>
			
			<div class="f-page">
				<div class="f-title">
					<h2>3ページ目見出し</h2>
				</div>
				<div class="box" style="font-size:100px;">
                3ページ目です。←クリックしてみて下さい。
                <p style="font-size:20px; padding-top:15px;">左右端辺りでマウスを右から左・左から右にめくって（移動）みて下さい。</p>
				</div>
			</div>
			
			<div class="f-page f-cover-back">
				<div id="codrops-ad-wrapper" style="font-size:100px;">
                裏表紙です。
				</div>
			</div>
		</div>

本の様にページめくりを導入するJavaScript（body終了タグ直前）の記述

jquery.min.js（v1.7.2）ファイルを読み込みます。Modernizr.loadを使用し、jquery.tmpl.min.js、jquery.history.js、core.string.js、jquery.touchSwipe-1.2.5.js、jquery.flips.jsファイルを読み込みます。
ページめくり後、条件によってfallback.cssファイルも読み込みます。

		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<script type="text/javascript">
				
			var $container 	= $( '#flip' ),
				$pages		= $container.children().hide();
			
			Modernizr.load({
				test: Modernizr.csstransforms3d && Modernizr.csstransitions,
				yep : ['js/jquery.tmpl.min.js','js/jquery.history.js','js/core.string.js','js/jquery.touchSwipe-1.2.5.js','js/jquery.flips.js'],
				nope: 'css/fallback.css',
				callback : function( url, result, key ) {
					
					if( url === 'css/fallback.css' ) {
						$pages.show();
					}
					else if( url === 'js/jquery.flips.js' ) {
						$container.flips();
					}
			
				}
			});
				
		</script>