立ち読みページ作成

本の立ち読みページをturn.jsというスクリプトで作ってみました。

パラパラと本をめくってる感がある効果のJavaScriptですね。
プログラムの最終更新が2013年と、やや古かったので、最初は別のを使おうと思ったのだけど、いらんものが色々ついてたりデザインカスタマイズがしにくそうだったりしたので、これにしてみました。
シンプルで綺麗で軽くてわかりやすいので、お薦めです。

ダウンロードすると、サンプルページが丸ごとフォルダに入ってるので、ページファイルを自分のものに差し替えるだけで使える超簡単仕様。
表示はサンプル通りのサイズでいいなら困らないけど、サイズを変えたい場合はちょっといじらないといけないです。
↓私はここらへんを自分の都合に合わせて幾つか変更しました。

▽CSSファイル内
.flipbook-viewport .container{
position:absolute;
top:38%;
left:43%;
margin:auto;
}

.flipbook-viewport .flipbook{
width:1128px;
height:800px;
left:-461px;
top:-300px;
}

.flipbook-viewport .page{
width:564px;
height:800px;
background-color:white;
background-repeat:no-repeat;
background-size:100% 100%;

▽index.html内
$('.flipbook').turn({
// Width
width:1128,
// Height
height:800,
……

デフォルトは右開きなので、左開きにするには、ページをくくってるタグ〈div class="flipbook"〉に　dir="rtl"　というオプションを追加して〈div class="flipbook" dir="rtl"〉にすればOKです。

一応スマホ対応してるけど、サイズ感が微妙。
何かしらいじれればどうにかできるんだろうけど、そこら辺は諦めよう。
スマホ対応ページは別にフリック/スワイプ対応のスクリプトでどうにかしようかなと思いつつ…
今すぐは面倒なので、いずれ頑張ろうっ★

関連記事

COMMENT 0