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