pageflip.jsを使って本の様にページめくりを導入する方法｜DAD UNION

pageflip.jsを使って、本の様にページめくりを導入する方法をご紹介します。

Contents

本の様にページめくりを導入するCSSの記述
本の様にページめくりを導入するHTMLの記述
pageflip.jsを使って、本の様にページめくりを導入するpageflip.jsファイルを読み込む
pageflip：ページめくりを導入したデモページ
ソース元：実装例: 20thingsilearned.com のページめくり効果 – HTML5 Rocks

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

※main.cssファイルを読み込みます。

	<link type="text/css" href="main.css" rel="stylesheet" media="screen" />

※main.cssファイルの内容は以下の通りです。ページめくりを行うエリア（#book、#pages section、#pageflip-canvas）を記述します。必要に応じて変更して下さい。

body, h2, p {
	margin: 0;
	padding: 0;
}

body {
	background-color: #444;
	color: #333;
	font-family: Helvetica, sans-serif;
}

#book {
	background: url("book.png") no-repeat;
	position: absolute;
	width: 830px;
	height: 260px;
	left: 50%;
	top: 50%;
	margin-left: -400px;
	margin-top: -125px;
}

#pages section {
	background: url("paper.png") no-repeat;
	display: block;
	width: 400px;
	height: 250px;
	position: absolute;
	left: 415px;
	top: 5px;
	overflow: hidden;
}
	#pages section>div {
		display: block;
		width: 400px;
		height: 250px;
		font-size: 12px;
	}
	#pages section p,
	#pages section h1 {
		padding: 3px 25px;
		line-height: 1.4em;
		text-align: justify;
	}
	#pages section h2 {
		padding: 3px 25px;
		line-height: 1.4em;
		text-align: justify;
	}
	#pages section h2{
		margin: 15px 0 10px;
	}

#pageflip-canvas {
	position: absolute;
	z-index: 100;
}

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

※sectionタグ毎が1ページとなります。必要に応じて変更して下さい。

		<div id="book">
			<canvas id="pageflip-canvas"></canvas>
			<div id="pages">
				<section>
					<div>
						<h1>ページ中央を境に左右めくりが可能です。</h1>
                        <h2>1ページ目</h2>
						<p>左右端辺りでマウスを右から左・左から右にめくって（移動）みて下さい。</p>
					</div>
				</section>
				<section>
					<div>
                        <h2>2ページ目</h2>
						<p>左右端辺りでマウスを右から左・左から右にめくって（移動）みて下さい。</p>
					</div>
				</section>
				<section>
					<div>
                        <h2>3ページ目</h2>
						<p>左右端辺りでマウスを右から左・左から右にめくって（移動）みて下さい。</p>
					</div>
				</section>
				<section>
					<div>
                        <h2>4ページ目</h2>
						<p>左右端辺りでマウスを右から左・左から右にめくって（移動）みて下さい。</p>
					</div>
				</section>
			</div>
		</div>

pageflip.jsを使って、本の様にページめくりを導入するpageflip.jsファイルを読み込む

※pageflip.jsファイルを読み込みます。

<script type="text/javascript" src="pageflip.js"></script>

※pageflip.jsファイルの内容は以下の通りです。（本の全体、1ページのサイズ、間隔等が調整できそうです）

(function() {
	
	// Dimensions of the whole book
	var BOOK_WIDTH = 830;
	var BOOK_HEIGHT = 260;
	
	// Dimensions of one page in the book
	var PAGE_WIDTH = 400;
	var PAGE_HEIGHT = 250;
	
	// Vertical spacing between the top edge of the book and the papers
	var PAGE_Y = ( BOOK_HEIGHT - PAGE_HEIGHT ) / 2;
	
	// The canvas size equals to the book dimensions + this padding
	var CANVAS_PADDING = 60;
	
	var page = 0;
	
	var canvas = document.getElementById( "pageflip-canvas" );
	var context = canvas.getContext( "2d" );
	
	var mouse = { x: 0, y: 0 };

	～