JavaScript

jquery.onebook3d.js完全ガイド：画像を本のようにめくるデジタル演出の作り方

  /

Web上で画像を本のようにめくることができる演出は、ユーザーに新鮮な体験を提供し、サイトの魅力を高めます。特にデジタルカタログやオンライン書籍、ポートフォリオサイトなど、視覚的なインパクトが求められる場面で大いに役立ちます。
今回は、jQueryプラグインであるjquery.onebook3d.jsを用いた実装方法を、初心者でも理解しやすいように詳しく解説します。

WordPressのプラグインとしても利用出来るみたいです。本のめくり演出するって自分でゼロからJavaScript作ろうとすると結構難しいですよね。

Contents

jquery.onebook3d.jsとは？

jquery.onebook3d.jsは、複数画像を用いて3Dの書籍のように見せることができるjQueryプラグインです。このプラグインを利用することで、コーディングの知識が浅い方でも複雑なJavaScriptのコーディングを行うことなく、プロフェッショナルな演出を加えることが可能です。WordPressのプラグインとしても活用でき、より広い範囲での利用が考えられます。

CSS設定

まずは、Webページの基本となる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>

HTMLの構造

次に、HTMLを記述します。divタグを使って、画像が表示される領域を指定します。ここでは複数画像を本をめくる様に表示するエリア（id=”books”）を用意します。

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

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

JavaScriptの設定

プラグインの機能を有効にするための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>

jquery.onebook3d.jsを使って画像を本をめくる様に表示するデモページ

実際にどのように動作するのかを見るために、以下のリンクからデモページを確認することができます。このデモを通じて、実際の動作を体験し、さらにカスタマイズのアイデアを得ることができます。

jquery.onebook3d.jsを使って画像を本をめくる様に表示するデモページ

ソース元：WP Plugin 3d book gallery, 2018

このプラグインの詳細やさらなる情報を得たい場合は、以下のリンクを参照してください。

WP Plugin 3d book gallery, 2018

まとめ

jquery.onebook3d.jsを使うことで、誰でも簡単に本のページをめくるような演出をWebサイトに取り入れることができます。この記事が、あなたのWebサイトやプロジェクトに新しいインスピレーションを与える一助となれば幸いです。

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

jquery.onebook3d.js 本めくり演出 本をめくる
関連記事