pageflip.jsを使って、本の様にページめくりを導入する方法をご紹介します。
Contents
ディスプレイ広告
本の様にページめくりを導入する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 };
~
pageflip:ページめくりを導入したデモページ
ソース元:実装例: 20thingsilearned.com のページめくり効果 – HTML5 Rocks
実装例: 20thingsilearned.com のページめくり効果 – HTML5 Rocks
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。