ページめくりができる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 }; ~