Create book flip effect with jQuery

Book Flip effect like turning pages of the books is quite popular and people used to do using Flash. But now, you can have book flip effect using jQuery. You can implement this book flip effect using a plugin called "Booklet". "Booklet.js" is a plugin for jQuery that adds a beautiful transition similar to real pages in a book or magazine for HTML5.

Also read "How to create page flip effect using jQuery"

You can place any sort of html elements inside of your booklet pages. There is no limit to the possibilities you can create. Even using simple options, you can have elaborate displays.

Features:

• Manual Page Turning
• Keyboard Navigation (use your arrows)
• Page Numbers
• Shadows (during animation)

First a DEMO:

Just take the mouse on the page number and drag it like you turning the page. You can also use keyboard arrow keys to turn the page.

How to use it:

First load jQuery and jQuery UI Library.

//Code Starts <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script> //Code Ends 

After that add reference of jQuery easing plugin. It is not completely necessary, if not included your animations will not look as nice.

//Code Starts <script src="http://builtbywill.com/code/booklet/src/jquery.easing.1.3.js" type="text/javascript"></script> //Code Ends 

After that download the booklet plugin and add it's reference of js and CSS both.

//Code Starts <script src="booklet/jquery.booklet.1.2.0.min.js" type="text/javascript"></script>  <link href="booklet/jquery.booklet.1.2.0.css" type="text/css"  rel="stylesheet" media="screen, projection, tv"></link> //Code Ends 

To create a booklet you must first place the content for the book onto your page.

• Make an outside container and give it an identifier like an ID or Class.
• Add a with class "b-load" inside the container. Inside of "b-load", add your pages. 
• The booklet will recognize each direct child of "b-load" as a slide, which could contain content or be a single item.

The following shows a simple four page book.

//Code Starts <div id='magazine'>   <div class='b-load'>      <div> Page 1 </div>     <div> Page 2 </div>     <div> Page 3 </div>   </div> </div> //Code Ends 

And finally call the booklet function to initialize booklet.

//Code Starts $(document).ready(function(){   $('#magazine').booklet(); });​ //Code Ends 

There are many options/events available with this plugin which you can use to customize it. Click here to find out all the available options with this plugin.

Download Plugin

Official website : Booklet

Also read "How to create page flip effect using jQuery"

Feel free to contact me for any help related to jQuery, I will gladly help you.