turn.jsを使って本のページめくりを演出する方法をご紹介します。
Contents
ディスプレイ広告
本のページめくりを演出するエリアのCSS記述
※必要に応じて変更して下さい。
<style type="text/css">
body{
background:#ccc;
}
#book{
width:800px;
height:500px;
}
#book .turn-page{
background-color:white;
}
#book .cover{
background:#333;
}
#book .cover h1{
color:white;
text-align:center;
font-size:14px;
line-height:500px;
margin:0px;
}
#book .loader{
background-image:url(loader.gif);
width:24px;
height:24px;
display:block;
position:absolute;
top:238px;
left:188px;
}
#book .data{
text-align:center;
font-size:40px;
color:#999;
line-height:500px;
}
#controls{
width:800px;
text-align:center;
margin:20px 0px;
font:30px arial;
}
#controls input, #controls label{
font:30px arial;
}
#book .odd{
background-image:-webkit-linear-gradient(left, #FFF 95%, #ddd 100%);
background-image:-moz-linear-gradient(left, #FFF 95%, #ddd 100%);
background-image:-o-linear-gradient(left, #FFF 95%, #ddd 100%);
background-image:-ms-linear-gradient(left, #FFF 95%, #ddd 100%);
}
#book .even{
background-image:-webkit-linear-gradient(right, #FFF 95%, #ddd 100%);
background-image:-moz-linear-gradient(right, #FFF 95%, #ddd 100%);
background-image:-o-linear-gradient(right, #FFF 95%, #ddd 100%);
background-image:-ms-linear-gradient(right, #FFF 95%, #ddd 100%);
}
</style>
本のページめくりを演出するエリアのHTML記述
※本のページめくりを演出するエリア(id=”book”)です。iPadの場合は右下辺りから左にスワイプ、PCの場合はキーボードの「←」「→」をクリックするとページめくりされます。
<div id="book">
<div class="cover"><h1>iPadの場合は右下辺りから左にスワイプ、<br />PCの場合はキーボードの「←」「→」をクリックして下さい。</h1></div>
</div>
<div id="controls">
<input type="text" size="3" id="page-number">/<span id="number-pages"></span>
</div>
turn.jsを使って本のページめくりを演出するJavaScriptの記述
※jquery-1.7.1.min.jsとturn.min.jsファイルを読み込みます。
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="turn.min.js"></script>
※$(’ページめくりエリア’).turn({ページめくりオプション})で各種設定します。ページ読込後キーボードクリックで「次へ」「前へ」ページがめくれる設定もしてます。
<script type="text/javascript">
// Sample using dynamic pages with turn.js
var numberOfPages = 1000;
// Adds the pages that the book will need
function addPage(page, book) {
// First check if the page is already in the book
if (!book.turn('hasPage', page)) {
// Create an element for this page
var element = $('<div />', {'class': 'page '+((page%2==0) ? 'odd' : 'even'), 'id': 'page-'+page}).html('<i class="loader"></i>');
// If not then add the page
book.turn('addPage', element, page);
// Let's assum that the data is comming from the server and the request takes 1s.
setTimeout(function(){
element.html('<div class="data">'+page+' ページ</div>');
}, 1000);
}
}
$(window).ready(function(){
$('#book').turn({acceleration: true,
pages: numberOfPages,
elevation: 50,
gradients: !$.isTouch,
when: {
turning: function(e, page, view) {
// Gets the range of pages that the book needs right now
var range = $(this).turn('range', page);
// Check if each page is within the book
for (page = range[0]; page<=range; page++)
addPage(page, $(this));
},
turned: function(e, page) {
$('#page-number').val(page);
}
}
});
$('#number-pages').html(numberOfPages);
$('#page-number').keydown(function(e){
if (e.keyCode==13)
$('#book').turn('page', $('#page-number').val());
});
});
$(window).bind('keydown', function(e){
if (e.target && e.target.tagName.toLowerCase()!='input')
if (e.keyCode==37)
$('#book').turn('previous');
else if (e.keyCode==39)
$('#book').turn('next');
});
</script>
turn.js:メージめくりを導入したデモページ
ソース元:Turn.js: The page flip effect in HTML
Turn.js: The page flip effect in HTML
Safari 5、Chrome 16、Firefox 10、IE 8~10は対応している様です。
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。