なめらかにカタログページをめくる動きを実践できるturn.js

こんにちは！毎日暑いですねー…。
アイスのおいしい季節になりました。

今回はタイトル通りなめらかにカタログページをめくる動きを実践できるturn.jsをご紹介します。

いつもこのブログの中ではソースをcodepenを使用してご紹介しているのですが、今回なぜかHTMLでソースを組んでも動くのに、codepen内で何度ソースを組みなおしても動きませんでした。これに苦戦し、このブログを書くのに時間がかかってしまった…

なので今日は普通に紹介していきます。笑

まずデモから~！
DEMOを見る

公式サイトからturn.jsを一式ダウンロードしてください。

まず読み込むファイルは以下。


<script src="../js/modernizr.2.5.3.min.js"></script>
<script src="../js/zoom.min.js"></script>

 

modernizr.2.5.3.min.jsというものをhead内に読み込ませます。
ただ、サーバーにあげるjsはこれだけではありません。

①turn.min.js
②turn.html4.min.js
③basic.css

この3つもあげておいてください。

HTMLソースは以下のよう感じ。


<div class="flipbook-viewport">

<div class="container">

<div class="flipbook">

<div style="background-image:url( images/catalog/sample1.jpg)"></div>
<div style="background-image:url( images/catalog/sample2.jpg)"></div>
<div style="background-image:url( images/catalog/sample3.jpg)"></div>
<div style="background-image:url( images/catalog/sample4.jpg)"></div>
<div style="background-image:url( images/catalog/sample5.jpg)"></div>
<div style="background-image:url( images/catalog/sample6.jpg)"></div>
<div style="background-image:url( images/catalog/sample7.jpg)"></div>
<div style="background-image:url( images/catalog/sample8.jpg)"></div>
<div style="background-image:url( images/catalog/sample9.jpg)"></div>
</div>
</div>
</div>

ソースの一番下、の前くらいに、

function loadApp() {

	// Create the flipbook

	$('.flipbook').turn({
			// Width
			width:1076,
			// Height
			height:700,
			// Elevation
			elevation: 50,
			// Enable gradients
			gradients: true,
			// Auto center this flipbook
			autoCenter: true
	});
}

yepnope({
	test : Modernizr.csstransforms,
	yep: ['../js/turn.min.js'],
	nope: ['../js/turn.html4.min.js'],
	both: ['../css/basic.css'],
	complete: loadApp
});

これを記載すれば完璧です！
あとはcssを各自に合わせて調整してみてください。

Share: