以前、画像を本をめくれるようにみれるjQueryプラグインである「FlipPage」をご紹介しましたが、今回ご紹介する「turn.js」はまるでFlashで作ったかのようにリアルな本のページを実現しています。しかも、たった6Kという軽さ。
HTML５とCSS３で作られているようで、IE８以前では作動しないのが残念ですが、将来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>
以上です。
サンプル用のページのソースを書いておいきます。ご参考まで。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!doctype html> <html> <head> <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> <style type="text/css"> body{ background:#ccc; } #magazine{ width:1152px; height:752px; } #magazine .turn-page{ background-color:#ccc; background-size:100% 100%; } </style> </head> <body> <div id="magazine"> <div style="background-image:url(pages/01.jpg);"></div> <div style="background-image:url(pages/02.jpg);"></div> <div style="background-image:url(pages/03.jpg);"></div> <div style="background-image:url(pages/04.jpg);"></div> <div style="background-image:url(pages/05.jpg);"></div> <div style="background-image:url(pages/06.jpg);"></div> </div> </body> </html> |
あわせてお読みください
Page Transitions with CSS3 ページを切り替えるときに効果を与える方法はいろいろありますが、ほとんどはjQueryなどのJavaScri…
Smooth Vertical or Horizontal Page Scrolling with jQuery 他のサイトと差をつけて、サイトを横スクロール…
Fullscreen Pageflip Layout 本をめくるようにページ送りができて、スマートフォンなどディスプレイの大きさに合わせて表示させたいと場合は…
2013/07/03 at 1:45 PM
今日は。ページをめくるJSを探していましたら、こちらにたどり着きました。情報有り難うございます。さて、お知らせいただいた通り、設定を行い無事にページがめくれるようになりました。ところがページが左上よりになってしまい、centerにできません。どうしたらページの中でcenterにできますか？
ご多忙中恐縮ですがよろしくお願いいたします。
2013/07/04 at 9:51 AM
コメントありがとうございます。
CSSの知識が少し必要となりますが、ページ内でcenterにしたいときはmarginを利用します。
この場合は、magazineというのがid名になっていますので、
#magazine {
margin:0 auto;
width:1152px;
height:752px;
}
というふうにmargin:0 auto;を追加してあげたらセンターになるはずです。
2013/07/04 at 6:54 PM
管理人様
お忙しい中、お返事いただいて有り難うございました。
指示どおりにcssを直したところ、きっちりcenterにできました。
有り難うございました。
まだまだ製作途中のサイトですが、完成しましたら、またこちらで
ご報告させていただきます。
今後ともよろしくお願いします。
取り急ぎ御礼まで
時節柄ご自愛ください。
2013/08/26 at 11:31 AM
はじめまして。
こちらを参考にさせて頂いて、turn.js試させて頂いております。
もし可能ならお伺いしたいのですが、グーグルクロームの最新バージョンでのみ、めくる動作が機能しません。少し前までは動作してましたので、クローム側の設定なのでしょうか・・？
少し調べがつかず、不躾ながら、ご質問させて頂きましたm(__)m
2013/09/02 at 3:41 PM
お世話になります。先日、質問させていただいた大内です。その節は有り難うございました。お陰さまでHP完成しました。
おおうちクリニックweb
http://www.asahi-net.or.jp/~np5k-oouc/magazine.html
になります。今後ともよろしくお願いします。
P.S ローカルテストでは問題なかったのですが、upしたら表示されなくなってしまいました。なにが悪いのでしょうか？また、上の方にも同じ質問がありましたが、ページがめくれません。ブラウザはgoogle clome29.0.1547.62です。ご教授いただければ幸甚です。よろしくお願いします。
2013/09/05 at 1:22 PM
有り難うございます。無事解決しました。お騒がせしまして済みません。有り難うございました。
2013/09/05 at 5:11 PM
大内さん
こんにちわ。大内さんの方のサイトはクロームできちんと動いていますね。
当方のはクロームでのみ動きません。
http://www.inst.or.jp/ehon/index2.html
解決したのどういう方法でしたでしょうか？
よろしければご教授下さいm(__)m
2013/09/05 at 10:52 PM
varubaさん
了解です。
連絡先をご連絡下さい。
2013/09/06 at 9:22 AM
大内さん、すいません。
varuba1@hotmail.com
がアドレスとなります。
お暇なときで構いませんm(__)m
2013/09/09 at 10:13 AM
大内さん
ご教授頂き、本当に助かりましたm(__)m
クリニックの繁栄とご健勝を祈っております。
管理人様もありがとうございますm(__)m
2016/10/13 at 2:07 PM
pannyattoさんこんにちは。
FilipPageからこちらに移動しました。和文の縦書きやコミックなどに対応できるように右開きにしたいというコメントにお答えいただきありがとうございました。試してみたところオプションの$(“#magazine”).turn({direction: “rtl”});ですと画面が現れない。ホームページのdocsに書いてあった#magazine{direction:RTL;}とかも順次また全部など試してみましたが画面がずれたりして、いずれも右開きスタートにはなりませんでした。オプションの意味がそもそも違うのでしょうか。
2016/10/14 at 11:47 AM
右開き第一段階クリアしました。pannyattoさんのサンプルソースの場合、
$(window).ready(function() {
$(“#magazine”).turn();
$(“#magazine”).turn(“page”, 6);「pageの後の数字は最終ページ番号」
});
のように２行に渡って記述したら最終ページが表示され戻る形で右開きのように動作できました。１行削除し忘れたらたまたま動いたという怪我の功名です。当然写真のは先頭ページを１番下の行にして積み上げていくような形で記述します。turn.jsに付属のデモmagazineの場合は
$(window).ready(function() {
$(‘#magazine’).turn({
page:6,
display: ‘double’,
……
のように記述すれば動きました。ご参考までに。