Blog

turn.jsを使った本をめくるようなコンテンツページ

turn.jsというプラグインを使って、

コンテンツを本をめくったように遷移するページを作ってみました。

ちなみにHTML5でしか使用できないようです。

 

コーポレートサイトで使用するのも特徴があっていいと思いますが、

電子書籍のアプリに使用できるかもしれません。

というか本家ではそのようなデモがありました。

 

簡単ではありますが、デモを作成したので、

まずはそちらをご覧頂ければと思いますが、 

IEでは見れないので、FirefoxかChromeでご覧ください。

四隅の角でページ送りができ、 ドラッグでページをめくるような動きもできます。

 

DEMO

 

turn.jsの使用方法

 

まずは、head部分に、

 

記入します。

 

そしてhtmlは、

 

奇数番目が、右側のページ(1番目は表紙)で、

偶数番目が、左側のページになります。

 

最後が重要なのですが、bodyの閉じタグの直前に、

 

 

を入れるだけです。

 

要はコンテンツの後に記述しないと動きません。

ここは気をつけて下さい。

 

デモでもこれしか記述してませんが、オプションがあります。

また、自分で作ることになりますが、javascriptで

ページ数を表示したり、メニューをつけたりできるようです。 

今回そこまで余裕がなかったので、

割愛させていただきました。

 

海外のサイトですがメニュー付きのデモは以下になります。

http://www.turnjs.com/

 

冒頭で紹介した、電子書籍のデモは以下になります。

電子書籍のようなページ

 

IEとか気にせず作れるようになりたいですね!

Author Profile

Y.A

アベと申します。
ディレクター兼デザイナー兼コーダーです。
まだまだ未熟者ですが、日々頑張っています。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ