Fullscreen Pageflip Layout

本をめくるようにページ送りができて、スマートフォンなどディスプレイの大きさに合わせて表示させたいと場合は、こちらの「Fullscreen Pageflip Layout 」を利用すると良さそうです。

ぺらぺらの紙をめくるというよりは、絵本のような厚みのある紙をめくっているような感じが実現されています。

サンプルを作ってみました。

→ 絵本をめくるようにページがめくれてレスポンシブ対応の「Fullscreen Pageflip Layout 」サンプル

※IE8など古いブラウザではアニメーションは動作しません。

次のライブラリーやjQueryプラグインを組み合わせて作ってあります。

  1. BookBlock by Pedro Botelho
  2. Custom jQuery++ by Bitovi
  3. jScrollPane by Kevin Luck
  4. jQuery Mouse Wheel Plugin by Brandon Aaron
  5. Custom Modernizr (peek inside to see what this build includes)

難しそうですが、ソースを一式配布してあるのでそのソースを利用してコンテンツを変更すれば簡単に実現できます。


【使用方法】
まずは、こちらのFullscreen Pageflip Layoutのサイトからソースを一式ダウンロードします。

HEAD部分でcssを設定します。

続いてBody内の最後にJavaScriptを読み込む記述をします。

以上で準備完了です。

次にコンテンツを作っていきます。

まずBODY部分にコントロールパネルの設定をします。

続いてコンテンツ(文章)を設定します。

レスポンシブなのでパソコン、タブレット、スマホで活用できるのが良いですね。

サンプルソースを書いておきます。どうぞご参考まで。

この記事と関連してると思われる記事: