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!
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.
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.
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
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.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With