以前、jQueryを使ってページをめくるような演出をつけるプラグイン
ページをめくる様な演出を実装できるjQueryプラグイン「Viewbook」」を紹介しましたが、
HTML5の<canvas>で同じようにページをめくる演出を付けるチュートリアル
「Page Flip Effect from 20thingsilearned.com」の動きが綺麗だったのでご紹介。

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


HTML5 Rocks – Case Study: Page Flip Effect from 20thingsilearned.com
デモページはこちら:Page Flip Effect Demo

HTML5で構成されたサイト「20 Things I Learned About Browsers and the Web」で使用されている仕組みで
ページをドラッグすることでページをめくる動きがついて次のページが表示されます。

サンプルファイルもダウンロード可能になっていて、
中の構成を確認することで<canvas>とJSの連携部分の参考にもなりそうです。

サイトよりサンプルファイルをダウンロードして
いろいろ試してみると、意外と簡単にあれこれ変更することも可能でした。

Page Flip Effect SAMPLE

軽量かつ動きが滑らかなので
機会があれば使ってみたい演出です。

ご参考までに。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (2)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

HTML5でページをめくるエフェクトのチュートリアル「Page Flip Effect from 20thingsilearned.com」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR