本をめくるようにページ送りができて、スマートフォンなどディスプレイの大きさに合わせて表示させたいと場合は、こちらの「Fullscreen Pageflip Layout 」を利用すると良さそうです。
ぺらぺらの紙をめくるというよりは、絵本のような厚みのある紙をめくっているような感じが実現されています。
サンプルを作ってみました。
→ 絵本をめくるようにページがめくれてレスポンシブ対応の「Fullscreen Pageflip Layout 」サンプル
※IE8など古いブラウザではアニメーションは動作しません。
次のライブラリーやjQueryプラグインを組み合わせて作ってあります。
- BookBlock by Pedro Botelho
- Custom jQuery++ by Bitovi
- jScrollPane by Kevin Luck
- jQuery Mouse Wheel Plugin by Brandon Aaron
- Custom Modernizr (peek inside to see what this build includes)
難しそうですが、ソースを一式配布してあるのでそのソースを利用してコンテンツを変更すれば簡単に実現できます。
→「絵本をめくるようにページがめくれてレスポンシブ対応の「Fullscreen Pageflip Layout 」」の続きを読む