【jQuery実践講座】ページめくりを表現できるjQuery「turn.js」の使い方
【更新情報】2017年6月7日 文言、画像を追記・修正しました。
【更新情報】2020年2月1日動画解説を追加しました。それに伴い、記事の内容も一部変更しました。
今回は、Webサイト上で雑誌や本をめくるような表現ができるjQueryプラグイン「turn.js」のご紹介です。
もちろん、この「turn.js」はWordPressにも組み込むことが出来ます。
まずは、サンプルを見てみましょう！
目次
【サンプル】雑誌風にページをめくれます
以下のかつ丼特集の画像の左上をページをめくるようにドラッグしてください。または、画像の角をクリックするだけでもOKです。
いかがでしょう？
本当に本をめくっているようなアニメーション効果でびっくりですよね。
それでは、WordPressに組み込む方法を紹介していきます。
動画解説
動画による解説です。記事内容と合わせて参考にしてみてください！
実装方法
早速、実装方法をご紹介します。
以下から練習用素材をダウンロードできますので、ダウンロードして試してみてください。
1.プラグイン「turn.js」を読み込む
ページめくりアニメーション用のプラグイン「turn.js」を以下のサイトからダウンロードしましょう。
turn.js
ダウンロードしたファイルの「lib」というフォルダの中に、「turn.js」ファイルがありますので、このファイルを練習用素材の「js」フォルダ内にコピーしましょう。
次に、練習素材のindex.htmlを開き、headタグ内に、turn.jsを読み込む処理を追加します。（以下）
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery-3.4.1.min.js"></script> <script src="js/turn.js"></script> <script src="js/my_script.js"></script> </head>
2.htmlに各ページの画像を配置
index.htmlのmainタグ内に、各ページの画像を１ページ目から順に配置し、div要素で囲みます。
全ページ配置したら、全体をdiv要素で囲みidを指定します。
※今回は、全体を囲んだdiv要素のidに「katudon_turn」という名前を付けています。
このidは、後ほどスクリプトを記載するときに使います。
<body> <div class="container"> <header> <h1>turn.jsサンプル</h1> </header> <main> <div id="katudon_turn"> <div> <img src="images/katudon_p1.jpg"> </div> <div> <img src="images/katudon_p2.jpg"> </div> <div> <img src="images/katudon_p3.jpg"> </div> <div> <img src="images/katudon_p4.jpg"> </div> <div> <img src="images/katudon_p5.jpg"> </div> <div> <img src="images/katudon_p6.jpg"> </div> <div> <img src="images/katudon_p7.jpg"> </div> </div> <ul> <li> <span id="prevpage">前のページ</span> </li> <li> <span id="nextpage">次のページ</span> </li> </ul> </main> </div> </body>
3.スクリプトの記載
最後にページめくり効果を実行するためのスクリプトを記述します。
練習素材のjsフォルダ内にあるmy_script.jsに以下のコードを記載しましょう。
HTMLの読み込みが終わったら、turnメソッドで、以下のような4行目〜17行目のようなオプションを設定します。
また、21行目、25行目は、次のページ、前のページをクリックされた時に飛んできて、turn(‘previous’),turn(‘next’)をコールすることで、前のページ、次のページへめくることができます。
$(function(){
$('#katudon_turn').turn(
{
// 自動でページをめくったときの高さ
elevation: 50,
// ページめくりのスピード(ms)
duration: 1000,
// ページをめくるときの影->有効
gradients: true,
// 自動中央揃え->無効
autoCenter: false,
// 右開きか左開きかの設定->右開き
direction: 'rtl',
}
);
$('#prevpage').click(function(){
$('#katudon_turn').turn('previous');
});
$('#nextpage').click(function(){
$('#katudon_turn').turn('next');
});
});
・elevation・・・・自動でページをめくったときの高さです。
・gradients・・・trueを設定すると、画像の角をマウスオーバーした時、ページが少しめくれた様なアニメーションになります。
・autoCenter・・・画像を自動的にセンターに配置するオプション
true：センターに配置
false：センターに配置しない
・duration・・・ページめくりのスピード(ms)
・direction・・・右開きか左開きかを設定できます。
rtl：右開き
ltr：左開き
【補足】WordPressに「turn.js」ファイルを組み込む方法
WordPressのサイトに[turn.js」を組み込むには、以下の方法を参照ください。
tまずは、「turn.js」ファイルをダウンロードします。
以下サイトの「DOWNLOAD」ボタンを押してファイルをダウンロードします。
turn.js
「turn.js」ファイルを自分のWordPress環境のJavascriptフォルダへ格納します。
私は、WordPressのテンプレート配下（index.phpやfunctions.phpが置いてある場所）にjsというフォルダを作り、その中に格納しました。
また、自分オリジナルのスクリプト処理を書くためのファイル「my_script.js」ファイルを新規で作成し、先ほど「turn.js」ファイルを格納した場所と同じ場所に置いてください。
そして、次にfunctions.phpに「turn.js」と「my_script.js」ファイルを読み込む処理を追加します。
functions.phpファイルに以下のように記載しましょう。４行目が「my_script.js」の読み込み、6行目が「turn.js」の読み込み処理になります。
functions.php
// スクリプト(jQuery)読み込み
function add_script(){
// my scriptの読み込み
wp_enqueue_script('my_script', get_template_directory_uri() . '/js/my_script.js', array('jquery'), '', true);
// ページめくりjQueryの読み込み
wp_enqueue_script('turn', get_template_directory_uri() . '/js/turn.js', array('jquery'), '', true);
}
add_action( 'wp_enqueue_scripts', 'add_script' );
まとめ
以上、ページめくりが表現できるturn.jsのご紹介でした。
使い所は限定されそうですが、雑誌紹介などリアリティを出したい時に使えそうですね。
少しでも参考になれば幸いです。
それでは！
