LogoMark.png

jQuery/FlipBook のバックアップ(No.2)


TurnJS

Flip Book を実現する JSライブラリー

公式サイト

http://www.turnjs.com/#
サンプルも含めて様々なコンテンツがダウンロードされますが、最小限必要なのは turn.min.js のみです。

サンプル

HTML

構成上の要点は、class="flipbook-viewport" の中に class="container"、さらにその中に class="flipbook"として、あとは、ページ順に画像を並べるだけです。

各ページの画像は、ページとなる div 要素の背景画像として定義します。

CSS


JavaScript