JavaScript

turn.jsを使って本のページめくりを演出する方法

  /

Turn.jsを使うことで、ウェブページ上で本のページをめくるようなエフェクトを実現できます。この記事では、CSS、HTML、JavaScriptのコードを使用して、Turn.jsを活用したページめくりの実装方法を詳しく解説します。

Contents

本のページめくりを演出するエリアのCSS記述

まずは、ページめくりエリアのスタイルを設定します。以下の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記述

次に、ページめくりエリアをHTMLで定義します。本のページめくりを演出するエリア（id=”book”）です。iPadの場合は右下辺りから左にスワイプ、PCの場合はキーボードの「←」「→」をクリックするとページめくりされます。

以下のHTMLコードを参考にしてください。

<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>

　
このコードでは、id=”book”のエリアにページめくりのエフェクトを適用します。iPadの場合はスワイプ、PCの場合はキーボードの矢印キーでページをめくることができます。

turn.jsを使って本のページめくりを演出するJavaScriptの記述

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>

次に、ページめくりのエフェクトを実現するJavaScriptコードを追加します。
$（’ページめくりエリア’）.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を使ったページめくりのデモページをご覧いただけます。

turn.js：メージめくりを導入したデモページ

ソース元：Turn.js: The page flip effect in HTML

Turn.jsの詳細については、公式サイトをご覧ください。

Turn.js: The page flip effect in HTML

対応ブラウザ

Turn.jsは、以下のブラウザで動作します。

  • Safari 5
  • Chrome 16
  • Firefox 10
  • Internet Explorer 8～10

まとめ

本記事では、Turn.jsを使ってウェブページに本のページめくりエフェクトを追加する方法を紹介しました。CSSでスタイルを設定し、HTMLで構造を作り、JavaScriptでインタラクションを実現しました。ぜひ自分のプロジェクトに取り入れて、魅力的なページめくりエフェクトを実現してください。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

turn.js ページめくり
関連記事