ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Page flip effectはHTML5とJavaScriptを使った電子書籍風ページ送りのサンプルソフトウェア。

Page flip effectはHTML5/JavaScript製のフリーウェア(ソースコードは公開されている)。電子書籍が騒がれているが、最も大事なのはもちろんコンテンツだ。そして次に大事なのは見せ方になってくるだろう。電子書籍らしさがなければいけない。


このようにページ送りされる

とは言え電子であろうとも書籍を読んでいる、と感じられる機能は大事なようだ。具体的に言えば、ページを捲っている感覚だ。指をスライドさせてページ送りをするだけでなく、ページがカールするような感覚、それをHTML5で実現するのがPage flip effectだ。

Page flip effectはGoogle Chrome Teamが以前に作った「20 Things I Learned About Browsers and the Web」と同じような感覚の電子書籍ビューワーになっている。

HTML5とJavaScriptで実現されており、実際のHTML部分はとても簡単な作りになっている。ページコンテンツの差し替えもごく簡単そうだ。デモは少し小さめだが、CSSなどで調整すれば十分見せられるものになるだろう。これでプレゼンをしたりすると、心休まる効果が得られるかも知れない。


コードはとてもシンプル


MOONGIFTはこう見る

Page flip effectはチュートリアルのページであり、HTML5/JavaScriptによるページ送りのイフェクトに関してコードを載せつつ細かく解説してくれている。これを参考にすれば手直ししたり自分なりの機能を追加するのも難しくなさそうだ。

Googleの元ネタではリジューム機能があったり、ブックカバーがある、マウスをページに持っていくだけで少しカールするなど機能面でも異なっている。とは言え参考になる部分はとても多そうなソフトウェアではある。

via Case Study - Page Flip Effect With HTML5 and Javascript | blogfreakz.com

Page Flip Effect Demo(デモ)

HTML5 Rocks - Case Study: Page Flip Effect from 20thingsilearned.com

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2