jQuery – 本をめくる効果が出せるスクリプト2選。「BookBlock.js」「Turn.js」


 

jQuery – 美しい!絵本をめくるような効果が出せるスクリプトBookBlockの使い方。

公式デモ:http://tympanus.net/Development/BookBlock/index.html
本をめくるような効果が出せるBookBlock

パラパラとめくるというよりも厚めの本をめくるような効果が出せるBookBlock。
PC・スマホ・タブレットでも操作可能なBookBlockを試してみます。
早速必要なファイルをhttp://tympanus.net/codrops/2012/09/03/bookblock-a-content-flip-plugin/からダウンロード!

ダウンロードしたファイルから今回使用したものは以下のものです。
-css-

  • default.css(無くても可)
  • bookblock.css
  • demo1.css(まずはデモ1のテストをしたいので)

-js-

  • jquery.bookblock.js
  • jquerypp.custom.js
  • modernizr.custom.js

-fonts-

*fontsフォルダそのままで可。

  • arrowsフォルダ
  • codropsiconsフォルダ

次に記述をしていきます。

  • htmlの記述
  • css/jsへのリンクを記述。
  • scriptも記述

htmlの記述
bb-itemの中に今回は画像を入れていますが、テキストでも大丈夫でした。

head内にcssリンク記述。

/body直前にjsリンク記述。*書き順が違うと動かないかもなのでこの順で。

上記jsリンクに続き以下のscriptを/body直前に記述

基本はこれで完了!
画像サイズなどはCSSで変更可能。

レスポンシブに画像を拡大縮小には向いてないです。
スマホ向けには画像サイズを調整するかDEMO4のフルスクリーンを使えばなんとかなるかなと思いました。

 

jQuery – 美しい!本をパラパラめくるような効果が出せるスクリプトTurn.jsの使い方。

公式デモ:http://www.turnjs.com/#samples/magazine3/1
Turn.js

こちらはパラパラと冊子をめくる効果が出せるTurn.js。
PC・スマホ・タブレットでも操作可能です。
早速必要なファイルをhttp://www.turnjs.com/のDownloadボタンからダウンロード!

ダウンロードするといくつかのサンプルデータが利用できますが、今回はBasicを使ってみました。
ダウンロードしたBasicファイルから今回使用したものは以下のものです。

-css-

  • basic.css

-js-

  • jquery.min.1.7.js
  • modernizr.2.5.3.min.js
  • turn.html4.js
  • turn.js

次に記述をしていきます。

  • htmlの記述
  • css/jsへのリンクを記述。(yepnope.jsを一部使用)
  • scriptも記述

htmlの記述

head内かbody終了直前にjsリンクを記述。

上記jsリンクに続き以下のscriptを/body直前に記述
このscriptでcssへリンクを付けています。
下のほうにあるyepnopeという記述のところです。
yepnope.jsは条件分岐によって描画速度を高速化させるjsです。

基本的はこれで完了
デモはこちら・・・といってもサンプルデモそのままです。;
本の角にカーソルを持っていくとめくれます。

 

オプションも多数用意されています。
詳細はこちらへhttp://www.turnjs.com/docs/Main_Page

 


この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL