web-dev-qa-db-ja.com

Flashでよく見られるJavaScript HTML 5 Canvas画像の「ページめくり」を行う方法は?

JavaScriptとHTML 5のキャンバスタグを使用してAdobe Flashで一般的に見られるような画像を使用して、ページめくり効果を再現しようとした人はいますか?

このタイプの効果をもたらすフレームワークまたはJQueryプラグインはありますか?

Flashのページめくりでは、シミュレートされた本のページの隅をつかみ、実際の本のページをめくるようにページをめくることができます。

JavaScriptとHTML 5のcanvasタグを使用してこれを行う方法を本当に学びたいのですが、どこから始めればよいのか、どのような数式が必要になるのかわかりません。

フラッシュでのページめくりの例

16
Zachary Scott

HTML5ベースのページフリッパーの別の(ナイスワン)実装を見るかもしれません: http://jpageflipper.codeplex.com/

それは本当に素敵で、jQueryプラグインとして実装されています。

16
Ivan Suhinin

これはjqueryプラグインで、かなり気の利いたものです

http://www.turnjs.com/#home

8
iamalismith

あなたは試すことができます jFlip 、それはjQueryプラグインです、それはIEに準拠していませんが、HTML5を要求しているのでそれはあなたにとって問題ではないと思います。

8
Soufiane Hassou

Narendrakumarがリンクしている ブラウザとWebについて私が学んだ20のこと の本に基づいて、独自のページめくり効果を作成することについて、明確で有益な ケーススタディ があります。これは模倣するのに最適な実装であり、ケーススタディは関連するコードサンプルで明確であり、この本を開発した会社であるFiのシニアインタラクティブ開発者によって書かれました。

4
Andrew Patton

これは、HTML5のCanvas ElementとjQueryを使用して作成したHTML5ページめくりアプリです。 RectoVerso と呼ばれます。

私もこれに遭遇しました: http://romancortes.com/ficheros/page-flip.html
これはCSS3のみで行われます。

4
Brad

これを見てください http://www.20thingsilearned.com/home

4
Narendrakumar

http://js1k.com/2010-first/demo/441
可能な限りコンパクト:D

3
mieszkoz
2
Noelchan

これはSVGの<foreignObject>要素とSVG変換。 Mark Finkleによるこのブログ投稿 には、「ページめくり/回転」効果で行う必要があるものの回転に関するいくつかの情報があります。私の知る限り、Gecko 1.9以降とWebKitだけがこれをサポートしています。

1
Eli Grey