Page flip effect for HTML5?

Question

Hi is it possible to have an effect of flipping a page like a book for HTML5? If so how is it done?

Thanks in advance!

Answer 1

Here is another page-flip animation done with CSS Animations UPDATE: LINK BROKEN. The methodology is based on Roman Cortes's inspired original.

The way this is constructed is that each right page is double-nested inside two divs. The inner div is rotated by 30 degrees around a rotation point above the page inside an outer div so that the page comes into view. The outer div is also rotated into view around the same rotation point by about 15 degrees. It is configured with an overflow:hidden and acts as a clipping container for the inner div page. z-indexing is used to stack the pages on top of each other.

Each page is overlaid and underlaid with a grey progressive opacity gradient which is scaled in the x-axis so that the shadow waxes and wanes as the page is turned.

The code is a little complex but view source is pretty straightforward

Answer 2

You can use the jQuery plugin for page flip effect.

Below is the link to the plugin of jQuery.

http://plugins.jquery.com/plugin-tags/page-flip

You can find demo at http://builtbywill.com/code/booklet/

Hope this will Help.

Answer 3

You can use CSS Transformations for this.

More info : http://www.the-art-of-web.com/css/css-animation/

Or here (only currently available in Webkit browsers) http://www.romancortes.com/blog/pure-css3-page-flip-effect/

Answer 4

turn.js is a plugin for jQuery that creates a very realistic page turn effect using HTML5, it’s a lovely effect and the plugin has been written in such a way that implementing and configuring it is simple and undemanding.