[JS]Canvasを使って本のページめくりを実装するチュートリアル | Web活メモ帳
本のページをめくるエフェクトを実装したい。 そんな方におすすめなのがCanvasを使用した本のページめくりの実装方法を記載した「Case Study: Page Flip Effect from 20thingsilearned.com」という記事のご紹介。 このHTML5RocksというサイトはGoogleが作成したサイトで、 HTML5に関する文書やチュートリアル、APIの使い方をまとめたサイトです。 記事を書いている方もGoogleの中の人のようで非常に勉強になります。 動作デモ ページめくりの動作は ドラッグする事でめくる動作と、クリックでページがふわふわ舞う動きの２パターンがありました。 実際の動作はこちらから見てみてください。 HTMLは非常に単純に出来ており、sectionタグに各ページの本文を記載しているだけのようです。 JavaScriptは本のサイズ取得からアニメーショ
![[JS]Canvasを使って本のページめくりを実装するチュートリアル | Web活メモ帳](https://cdn-ak-scissors.b.st-hatena.com/image/square/2f4d007dc1e974900c1f4157179c9d526578938a/height=288;version=1;width=512/https%3A%2F%2Fblog.verygoodtown.com%2Fwordpress%2Fwp-content%2Fuploads%2F2011%2F02%2F20110206-02.png)
Bespin - Backnumbers: Steps to Phantasien
六本木にある SNS の会社で開催されたデータベースの勉強会に向かった私は道に迷って会場に辿りつけず失意のまま帰宅した. もうサーバサイドなんて知らねーよ! そう(地図を忘れた自分に)憤り, 現実逃避にクライアントサイドのコードでも読むかと Bespin を眺めた. Bespin は Mozilla が開発中のウェブで動くテキストエディタサービス. デモ版 が公開されている. もう少し詳しい話 によると, HTML5 の <canvas> で色々実装しているらしい. そういえばそんな機能があったなーと思いだし, どんなものかと コード をチェックアウトした. ツリーの構成 Bespin のソースは今のところ約 3 万行 ある. サードパーティのライブラリを除くと 2 万行くらい. backend/ frontend/ mocks/ slices/ docs/ research/ templ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2009-02-11 - 最速チュパカブラ研究会
