LogoMark.png

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


#author("2021-05-11T19:39:04+09:00;1970-01-01T18:00:00+09:00","default:inoue.ko","inoue.ko")
#author("2021-05-11T19:45:41+09:00;2021-05-11T19:39:04+09:00","default:inoue.ko","inoue.ko")
*TurnJS
Flip Book を実現する JSライブラリー
~

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

***サンプル
-DEMO:https://koichi-inoue.github.io/JQ_TurnJS/
-CODE:https://github.com/koichi-inoue/JQ_TurnJS
~

***HTML
#gistit(koichi-inoue/JQ_TurnJS/blob/main/index.html,,400)

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

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

***CSS
#gistit(koichi-inoue/JQ_TurnJS/blob/main/style.css,,400)
#gistit(koichi-inoue/JQ_TurnJS/blob/main/css/style.css,,400)
~

***JavaScript

#gistit(koichi-inoue/JQ_TurnJS/blob/main/script.js,,400)
#gistit(koichi-inoue/JQ_TurnJS/blob/main/js/script.js,,400)

~
~