pageflip:メージめくりを導入できるJs パート3



前回
FULLSCREENBOOKBLOCK:メージめくりを導入できるJS パート2
と前々回
FLIPBOARDPAGELAYOUT:メージめくりを導入できるJS
と紹介しましたページめくりのパート3です。

1.HTML(全体)の記述例

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

<!DOCTYPE html>
<html>
    <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link type="text/css" href="main.css" rel="stylesheet" media="screen" />
	<title>pageflip:メージめくりを導入したデモページ パート3</title>
	<meta name="keywords" content="html5rocks.com,20thingsilearned.com,pageflip.js,ページめくり,flip,canvas">
	<meta name="description" content="pageflip:メージめくりを導入したデモページ パート3のページです。">
	<link type="text/css" href="main.css" rel="stylesheet" media="screen" />
</head>
<body>
		<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>
        
		<script type="text/javascript" src="pageflip.js"></script>
</body>
</html>

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:メージめくりを導入したデモページ パート3

ソース元:実装例: 20thingsilearned.com のページめくり効果 – HTML5 Rocks
最終形態:20 Things I Learned About Browsers and the Web こんなことも出来るみたいです。

上記「最終形態」はIEでも見れる様ですがデモだとむりぽ。