How to do a JavaScript HTML 5 Canvas image “page flip” like you commonly see in Flash?

Question

Has anyone tried recreating the page flip effect with images like you commonly see in Adobe Flash with JavaScript and HTML 5\'s canvas tag?

Are there any frameworks or J

Answer 1

This one is a jquery plugin and pretty nifty

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

Answer 2

There is a clear and informative case study about creating your own page flip effect based on the one in the 20 Things I Learned About Browsers and the Web book that Narendrakumar linked to. It’s a great implementation to imitate, the case study is clear with relevant code samples, and it was written by a senior interactive developer for Fi, the company who developed the book.

Answer 3

see this http://www.20thingsilearned.com/home

Answer 4

http://js1k.com/2010-first/demo/441
As compact as possible :D

Answer 5

This is better done with SVG's <foreignObject> element and SVG transforms. This blog post by Mark Finkle has some info on rotating stuff as you would need to do in a "page flip/turn" effect. As far as I know, only Gecko 1.9+ and WebKit support this.

Answer 6

You might have a look at another (nice one) implementation of HTML5-based page flipper: http://jpageflipper.codeplex.com/

It's really nice and it's implemented as a jQuery plugin.