Amazing jQuery Notebook Page Flip Animation

Everyday jQuery is getting more and more popular because of it’s usefulness, flexibility and speed. This notebook animation style like “flash page layout” page flip animation is an excellent example of these competencies. This fancy jQuery Notebook skin uses a jQuery animation plugin called jQuery Booklet Plugin.

Pro’s of the jQuery Notebook Animation

• Lightweight (only 17kb minified version)
• Easy to install with sliding divs for pages
• Very smooth page flip animation and life like page effect

View Demo

How to Install

1. Download the jQuery MoleSkine Notebook Package
2. Add the HTML below (add a div with class “b-load” for each page)
3. Edit the CSS styles to suit your needs
4. Edit the Booklet JS options to tweak the page animaton

jQuery Moleskine Package Includes:

• jQuery Booklet Plugin
• All images needed: photoshop file background, navigation images etc…
• jQuery 1.4.4.min.js
• jQuery easing.1.3.js
• Custom Fonts for page
• HTML template example

HTML Code

<div class="book_wrapper">
	<a id="next_page_button"></a>
	<a id="prev_page_button"></a>

	<div id="loading" class="loading">Loading pages...</div>

	<div id="mybook" style="display:none;">
		<div class="b-load">
			<div>
				<img src="images/1.jpg" alt=""/>
				<h1>Slider Gallery</h1>
				<p>This tutorial is about creating a creative gallery...
				<a href="#" class="article">Article</a>
				<a href="#" class="demo">Demo</a>
			</div>
			<div>
				...
			</div>
		</div>
	</div>
</div>

Source:  http://tympanus.net/codrops/2010/12/14/moleskine-notebook/