LogoMark.png

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


#author("2021-05-11T19:45:41+09:00;2021-05-11T19:39:04+09:00","default:inoue.ko","inoue.ko")
#author("2021-09-25T11:29:12+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'' のみです。
~

***サンプル
-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)
***HTML 付記
-構成上の要点は、class="flipbook-viewport" の中に class="container"、さらにその中に class="flipbook"として、あとは、ページ順に画像を並べるだけです。

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

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

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

***JavaScript

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

~
~