Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Page flip effect for HTML5?

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!

like image 784
questor Avatar asked Jan 06 '11 09:01

questor


People also ask

Is Flip HTML5 free?

FlipHTML5 is a free Flip Book Maker designed to convert PDF and Images to HTML5 & jQuery based page flip eBook, making PDF files more interactive.

What is turn js?

js is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5. The web is getting beautiful with new user interfaces based in HTML5; turn. js is the best fit for a magazine, book or catalog based in HTML5.


3 Answers

Here is another page-flip animation done with CSS Animations UPDATE: REPLACED LINK WITH ARCHIVE.ORG URL. 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

like image 175
Michael Mullany Avatar answered Oct 08 '22 14:10

Michael Mullany


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.

like image 8
eHussain Avatar answered Oct 08 '22 16:10

eHussain


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/

like image 5
LiamB Avatar answered Oct 08 '22 15:10

LiamB