How to create Flipboard/Book style page-flips using CSS & Jquery Plugins
- Thursday, March 14, 2013 By Ramya Santhosh
Web developers develop the effects that are inspired by the real world examples. Page-flips are one of the most popular ones of them in web design. Flipboard style is one such famous page flip effect implementd which gives your web layout look like a book with turning pages like real books. To achieve this, you don’t need to be a master in JQuery Coding. Thanks to Booklet JQuery plugin. Booklet is a jQuery powered plugin for a flipbook style layout. The plugin provides many options to customize it as per your needs. You can change the speed, starting page, shadows, reading direction and many more.
The main advantage of this JQuery plugin is that keyboard navigation makes it really easy to use this plugin. One more is you can have customized buttons for the navigation’s too.
<link href=”booklet/jquery.booklet.latest.css” type=”text/css” rel=”stylesheet” media=”screen, projection, tv” />
After you download the package, unzip and you will find jquery.easing.1.3.js, jquery.booklet.latest.min.js and jquery.booklet.latest.css files in booklet directory.
Step 2 : Insert the content into the book. The following shows a simple four page book.
<h3>Yay, Page 1!</h3>
<h3>Yay, Page 2!</h3>
<h3>Yay, Page 3!</h3>
<h3>Yay, Page 4!</h3>
Step 3 : Initialize the Booklet
The different options above shows width and Height set, pagenumbers made invisible, keyboard navigation is enabled and for creating custom previous and next buttons a control has been created. You can see this options working on the demo page. For more customization read the complete documentation on the BookLet Plugin.
Happy Book Reading !