html5rocks is sharing tutorial how to create page flip effect with HTML5 and Javascript. This tutorial is case study of an HTML5-based educational web app called 20 Things I Learned about Browsers and the Web (www.20thingsilearned.com).
The tutorial will take us through the process of creating our own page flip effect using the canvas element and plenty of JavaScript.

It has one main container element for the book, which in turn contains the different pages of the book and the canvas element that we will be drawing the flipping pages on. Inside of the section element there is a div wrapper for the content - we need this to be able to change the width of the page without affecting the layout of its contents. The div has a fixed width and the section is set to hide its overflow, this results in the width of the section acting as a horizontal mask for the div.

The code required to power the page flip is not very complex, but it is quite extensive since it involves a lot of procedurally generated graphics. In the end of articles, source code is available for download.

Demo: http://www.html5rocks.com/tutorials/casestudies/20things_pageflip/example/
Source: http://www.html5rocks.com/tutorials/casestudies/20things_pageflip.html

Incoming search terms for the article:

• html5 page flip
• page flip html5
• pageflip HTML5
• html5 pageflip
• javascript Page flip
• html5 flip page
• html5 flip
• flip page html5
• HTML5 book flip
• html5 page flip effect