Learning 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.