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

	
	

	
Loading pages...

	

		

			

				
Slider Gallery
				
This tutorial is about creating a creative gallery...
				Article
				Demo
			
			

				...
			
		
	

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

Meet the author

Sam Deering

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.