本のようなページめくりアニメーションを実現するturn.jsを用いて、DIV要素をページめくりできるように実装を行っています。
turn.jsではページの右下あるいは右上のコーナーにカーソルをもっていくことで、ページがめくれるようになるのですが、右下などのコーナーではなく右端にカーソルを持っていくことでページをめくれるようにしたいと考えております。
オプション設定ではそのような項目がありません。また、右端からめくれるように設定自体はできるようなのですが、ページめくりのアニメーションが硬い感じに変わってしまうため、できればページめくりできる領域である右下コーナーの設定を右端に変更できないか模索しております。
実行ファイルであるturn.js内の記述のどこかをいじればできそうなのですが、「corner」と記述されている部分などを見て弄ってみましたが、期待した動きにはなりませんでした。
上記解決できる方、よろしくお願いいたします。
HTML
1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>無題ドキュメント</title> 6<link href="css/style.css" rel="stylesheet" type="text/css" /> 7<script type="text/javascript" src="js/jquery-2.2.2.min.js"></script> 8<script type="text/javascript" src="js/turn.js"></script> 9<script type="text/javascript"> 10 $(function(){ 11 $('#flipbook').turn({ 12 width:500, 13 height:646, 14 }); 15 }); 16</script> 17</head> 18 19<body> 20 <div id="flipbook"> 21 <div class="page1"><p>ああああ</p></div> 22 <div class="page2"><p>いいいい</p></div> 23 <div class="page3"><p>うううう</p></div> 24 </div> 25</body> 26</html>
※turn.jsはこちらからダウンロードできるファイルのlibフォルダ内にあります。
あなたの回答
tips
プレビュー