ぱんにゃっとTutorial

jQueryやWordPress、Webデザインに役立つ情報など

ページをめくり効果が美しい。雑誌や本のようにページをめくれるjQueryプラグイン「turn.js」

time 2012/04/26

ページをめくり効果が美しい。雑誌や本のようにページをめくれるjQueryプラグイン「turn.js」

turn.js

以前、画像を本をめくれるようにみれるjQueryプラグインである「FlipPage」をご紹介しましたが、今回ご紹介する「turn.js」はまるでFlashで作ったかのようにリアルな本のページを実現しています。しかも、たった6Kという軽さ。

HTML5とCSS3で作られているようで、IE8以前では作動しないのが残念ですが、将来FlashからHTML5が主流になる可能性を考えると期待大です。

その他のFirefoxなどのブラウザ、タブレット端末やスマートフォン端末には対応しています。

サンプルはこちら。ページの端をクリックするか、ドラッグするとページがめくれます。

→ ページをめくり効果が美しい。雑誌や本のようにページをめくれるjQueryプラグイン「turn.js」サンプル

jQueryプラグイン「turn.js」の使い方は続きをどうぞ。


まずは、こちらからzipファイルを一式ダウンロードするとjsファイルがあります。

<head>部にJavascriptを設定します。
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.7.1.min.js”></script>
<script type=”text/javascript” src=”js/turn.min.js”></script>
<script type=”text/javascript”>
$(window).ready(function() {
$(‘#magazine’).turn();
});
</script>

続いてcssを設定します。
#magazine{
width:800px;
height:400px;
}
#magazine .turn-page{
width:400px;
height:400px;
background-color:#ccc;
}

<body>部に以下のように記入します。<div>で囲んだ要素がページになります。
<div id=’magazine’>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
</div>
以上です。

サンプル用のページのソースを書いておいきます。ご参考まで。

sponsored link

コメント

  • […] ページをめくる効果が美しい。雑誌や本のようにリアルにページをめくれるjQueryプラグイン「turn.js」. […]

    by ページをめくる効果が美しい。雑誌や本のようにリアルにページをめくれるjQueryプラグイン「turn.js」 | 雑多ブログ €2012/12/19 9:25 AM

  • 今日は。ページをめくるJSを探していましたら、こちらにたどり着きました。情報有り難うございます。さて、お知らせいただいた通り、設定を行い無事にページがめくれるようになりました。ところがページが左上よりになってしまい、centerにできません。どうしたらページの中でcenterにできますか?
    ご多忙中恐縮ですがよろしくお願いいたします。

    by 大内 €2013/07/03 1:45 PM

    • コメントありがとうございます。

      CSSの知識が少し必要となりますが、ページ内でcenterにしたいときはmarginを利用します。
      この場合は、magazineというのがid名になっていますので、
      #magazine {
      margin:0 auto;
      width:1152px;
      height:752px;
      }
      というふうにmargin:0 auto;を追加してあげたらセンターになるはずです。

      by pannyatto €2013/07/04 9:51 AM

  • 管理人様
    お忙しい中、お返事いただいて有り難うございました。
    指示どおりにcssを直したところ、きっちりcenterにできました。
    有り難うございました。
    まだまだ製作途中のサイトですが、完成しましたら、またこちらで
    ご報告させていただきます。
    今後ともよろしくお願いします。
    取り急ぎ御礼まで
    時節柄ご自愛ください。

    by 大内 €2013/07/04 6:54 PM

  • はじめまして。

    こちらを参考にさせて頂いて、turn.js試させて頂いております。

    もし可能ならお伺いしたいのですが、グーグルクロームの最新バージョンでのみ、めくる動作が機能しません。少し前までは動作してましたので、クローム側の設定なのでしょうか・・?

    少し調べがつかず、不躾ながら、ご質問させて頂きましたm(__)m

    by varuba €2013/08/26 11:31 AM

  • お世話になります。先日、質問させていただいた大内です。その節は有り難うございました。お陰さまでHP完成しました。

    おおうちクリニックweb
    http://www.asahi-net.or.jp/~np5k-oouc/magazine.html

    になります。今後ともよろしくお願いします。
    P.S ローカルテストでは問題なかったのですが、upしたら表示されなくなってしまいました。なにが悪いのでしょうか?また、上の方にも同じ質問がありましたが、ページがめくれません。ブラウザはgoogle clome29.0.1547.62です。ご教授いただければ幸甚です。よろしくお願いします。

    by 大内 €2013/09/02 3:41 PM

  • 有り難うございます。無事解決しました。お騒がせしまして済みません。有り難うございました。

    by 大内 €2013/09/05 1:22 PM

  • 大内さん

    こんにちわ。大内さんの方のサイトはクロームできちんと動いていますね。

    当方のはクロームでのみ動きません。
    http://www.inst.or.jp/ehon/index2.html

    解決したのどういう方法でしたでしょうか?
    よろしければご教授下さいm(__)m

    by varuba €2013/09/05 5:11 PM

  • varubaさん

    了解です。
    連絡先をご連絡下さい。

    by 大内 €2013/09/05 10:52 PM

  • 大内さん、すいません。

    varuba1@hotmail.com

    がアドレスとなります。
    お暇なときで構いませんm(__)m

    by varuba €2013/09/06 9:22 AM

  • 大内さん

    ご教授頂き、本当に助かりましたm(__)m

    クリニックの繁栄とご健勝を祈っております。

    管理人様もありがとうございますm(__)m

    by varuba €2013/09/09 10:13 AM

down

コメントする




PICK UP記事






sponsored link