jquery.onebook3d.jsを使って画像を本をめくる様に表示する方法｜DAD UNION

jquery.onebook3d.jsを使って画像を本をめくる様に表示演出する方法をご紹介します。WordPressのプラグインとしても利用出来るみたいです。
本のめくり演出するって自分でゼロからJavaScript作ろうとすると結構難しいですよね。

Contents

画像を本をめくる様に表示するCSS記述
jquery.onebook3d.jsを使って画像を本をめくる様に表示するHTML記述
jquery.onebook3d.jsを使って画像を本をめくる様に表示するJavaScriptの記述
jquery.onebook3d.jsを使って画像を本をめくる様に表示するデモページ
ソース元：WP Plugin 3d book gallery, 2018

画像を本をめくる様に表示するCSS記述

※必要に応じて変更して下さい。

<style>
body {
  margin: 0;
  padding: 0;
  font-size: 18px;
  text-align: center;
  width:100%;
  margin:0px;
  padding:0px;
  background-color: #000;
  color: #fff;
}
h1{
  text-align: center;
  font-size: 20px;
  line-height: 2em;
  padding: 30px 0 0 0;
}
</style>

jquery.onebook3d.jsを使って画像を本をめくる様に表示するHTML記述

※複数画像を本をめくる様に表示するエリア（id=”books”）を用意します。

<h1>jquery.onebook3d.jsを使って画像を本をめくる様にします。<br>以下の画像をマウス右クリックしながら左右に移動させてみてください。</h1>

<div style="padding: 0 30px 30px 30px;">
  <div id="books"></div> 
</div>

jquery.onebook3d.jsを使って画像を本をめくる様に表示するJavaScriptの記述

※jquery-1.11.0.min.js、jquery.mousewheel.min.js、three.min.js、jquery.onebook3d-2.33.jsファイルを読み込みます。複数画像（1 ～ 8.jpg）用意し、画像のパスを配列（arry）に代入します。$(‘画像を本をめくる様に表示するエリア’).onebook(複数画像配列)を記述します。

<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="three.min.js"></script>
<script type="text/javascript" src="jquery.onebook3d-2.33.js"></script>
<script>
$(function(){
  var arry = [];

  arry = [
    '1.jpg',
    '2.jpg',
    '3.jpg',
    '4.jpg',
    '5.jpg',
    '6.jpg',
    '7.jpg',
    '8.jpg'
    ];          
  
  $('#books').onebook(arry);
});
</script>