pageflip：メージめくりを導入できるJs

ページめくりができるjsです。

1．HTML（全体）の記述例

cssはデモページのmain.cssを参考にしてみて下さい。

    
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	 	<link type="text/css" href="main.css" rel="stylesheet" media="screen">
	<title>pageflip：メージめくりを導入したデモページ</title>
	<meta name="keywords" content="html5rocks.com,20thingsilearned.com,pageflip.js,ページめくり,flip,canvas">
	<meta name="description" content="pageflip：メージめくりを導入したデモページのページです。">
	 	<link type="text/css" href="main.css" rel="stylesheet" media="screen">



<div id="book">
			<canvas id="pageflip-canvas"></canvas>

<div id="pages">
				<section>

<div>

<h1>ページ中央を境に左右めくりが可能です。</h1>


<h2>1ページ目</h2>

						
左右端辺りでマウスを右から左・左から右にめくって（移動）みて下さい。
</div>

				</section>
				<section>

<div>

<h2>2ページ目</h2>

						
左右端辺りでマウスを右から左・左から右にめくって（移動）みて下さい。
</div>

				</section>
				<section>

<div>

<h2>3ページ目</h2>

						
左右端辺りでマウスを右から左・左から右にめくって（移動）みて下さい。
</div>

				</section>
				<section>

<div>

<h2>4ページ目</h2>

						
左右端辺りでマウスを右から左・左から右にめくって（移動）みて下さい。
</div>

				</section>
</div>

</div>

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

2．body終了タグ直前の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 };

	～

pageflip：メージめくりを導入したデモページ

ソース元：実装例: 20thingsilearned.com のページめくり効果 – HTML5 Rocks