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

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

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

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

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

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

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

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

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.11.1%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22js%2Fmodernizr.2.5.3.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

 

modernizr.2.5.3.min.jsというものを<head></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>

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

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%0Afunction%20loadApp()%20%7B%0A%0A%09%2F%2F%20Create%20the%20flipbook%0A%0A%09%24('.flipbook').turn(%7B%0A%09%09%09%2F%2F%20Width%0A%09%09%09width%3A1076%2C%0A%09%09%09%2F%2F%20Height%0A%09%09%09height%3A700%2C%0A%09%09%09%2F%2F%20Elevation%0A%09%09%09elevation%3A%2050%2C%0A%09%09%09%2F%2F%20Enable%20gradients%0A%09%09%09gradients%3A%20true%2C%0A%09%09%09%2F%2F%20Auto%20center%20this%20flipbook%0A%09%09%09autoCenter%3A%20true%0A%09%7D)%3B%0A%7D%0A%0A%09%0A%2F%2F%20Load%20the%20HTML4%20version%20if%20there's%20not%20CSS%20transform%0A%0Ayepnope(%7B%0A%09test%20%3A%20Modernizr.csstransforms%2C%0A%09yep%3A%20%5B'js%2Fturn.min.js'%5D%2C%0A%09nope%3A%20%5B'js%2Fturn.html4.min.js'%5D%2C%0A%09both%3A%20%5B'css%2Fbasic.css'%5D%2C%0A%09complete%3A%20loadApp%0A%7D)%3B%0A%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

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