Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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 JQuery plug-ins that do this type of effect?

The page flip in Flash allows you to grab a corner of the simulated book page and flip the page like you would flip a real book's page.

I really want to learn how to do this with JavaScript and HTML 5's canvas tag, but not sure where to start nor what formulas would be necessary.

Example page flip in flash

like image 614
Zachary Scott Avatar asked Dec 02 '09 19:12

Zachary Scott


2 Answers

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.

like image 194
Ivan Suhinin Avatar answered Oct 03 '22 14:10

Ivan Suhinin


You can try jFlip, it's a jQuery Plugin, It's not IE-compliant but I guess it's not a problem for you since you are asking for HTML5.

like image 29
Soufiane Hassou Avatar answered Oct 03 '22 14:10

Soufiane Hassou