How to create page flip effect using jQuery

jQuery is becoming popular day by day and you would see something new happening with jQuery. Page Flip effect like magazine is quite popular and people used to do using Flash. But now, you can have page flip effect using jQuery. In jQuery, you can achieve this page flip effect animation using a plugin called "turn". "turn.js" is a plugin for jQuery that adds a beautiful transition similar to real pages in a book or magazine for HTML5.

Features:

  • Uses Hardware acceleration
  • Works on tablets and smartphones
  • Easy to manipulate
  • Lightweight, only 6K

First a DEMO:


Just take the mouse either on top-right corner or bottom-right corner and click to see the page flip effect.



Code:

All you need to do is declare a div element and use the CSS to set the height, width and color of the element.
//Code Starts
​#magazine
{
   width:800px;
   height:400px;
}
#magazine .turn-page
{
   width:400px;
   height:400px;
   background-color:#ccc;
}


<div id='magazine'>
   <div> Page 1 </div>
   <div> Page 2 </div>
   <div> Page 3 </div>
</div>
//Code Ends
Now use the following code.
//Code Starts
​$(document).ready(function(){
    $('#magazine').turn();
});​
//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.
Credit : @blasten
Official website : turn.js

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

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..