デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

ページめくりを表現できるjQuery「turn.js」の使い方

turnjs_eyecatch
【更新情報】2017年6月7日 文言、画像を追記・修正しました。

今回は、Webサイト上で雑誌や本をめくるような表現ができるjQueryプラグイン「turn.js」のご紹介です。
もちろん、この「turn.js」はWordPressにも組み込むことが出来ます。
まずは、サンプルを見てみましょう!

スポンサーリンク

【サンプル】雑誌風にページをめくれます

以下のかつ丼特集の画像の左上をページをめくるようにドラッグしてください。または、画像の角をクリックするだけでもOKです。

katudon_p2
katudon_p3
katudon_p4
katudon_p5
katudon_p6
katudon_p7

いかがでしょう?
本当に本をめくっているようなアニメーション効果でびっくりですよね。
それでは、WordPressに組み込む方法を紹介していきます。

WordPressに「turn.js」ファイルを組み込む方法

まずは、「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ファイルに以下のように記載しましょう。4行目が「my_script.js」の読み込み、6行目が「turn.js」の読み込み処理になります。

functions.php

htmlに各ページの画像を配置

html部分には、各ページの画像を1ページ目から順に配置し、div要素で囲みます。
全ページ配置したら、全体をdiv要素で囲みidを指定します。
※今回は、全体を囲んだdiv要素のidに「katudon_turn」という名前を付けています。
idは自分の好きな名前でOKです。このidは、後ほどスクリプトを記載するときに使います。

スクリプトの記載

最後にページめくり効果を実行するためのスクリプトを記述します。
先ほど新規で作成した「my_script.js」に以下のコードを記載しましょう。
3行目の’#katudon_turn’は、先ほどの手順で設定したdiv要素のidを書きましょう。


17行目のdirectionというパラメータで、左開きか右開きかを設定できます。
rtlは、左開き、ltrは右開きとなります。

my_script.js

パラメータ説明
elevation・・・・色々設定値を変えてみましたが、動きに変化は見られません。とりあえず、50を設定しておけば問題ないと思います。

gradients・・・trueを設定すると、画像の角をマウスオーバーした時、ページが少しめくれた様なアニメーションになります。

autoCenter・・・画像を自動的にセンターに配置するオプション
true:センターに配置
false:センターに配置しない

direction・・・右開きか左開きかを設定できます。
rtl:右開き
ltr:左開き

まとめ

以上、ページめくりが表現できるturn.jsのご紹介でした。
使い所は限定されそうですが、雑誌紹介などリアリティを出したい時に使えそうですね。
少しでも参考になれば幸いです。

それでは!

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ページトップボタン