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

Download the jQuery MoleSkine Notebook Package
Add the HTML below (add a div with class “b-load” for each page)
Edit the CSS styles to suit your needs
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/

Frequently Asked Questions (FAQs) about jQuery Notebook-Style Page Animation

How can I customize the speed of the page turn animation in jQuery?

The speed of the page turn animation in jQuery can be customized by adjusting the duration parameter in the .animate() method. The duration is specified in milliseconds; higher values indicate slower animations, not faster ones. For example, if you want the animation to last 2 seconds, you can set the duration to 2000.

Can I use jQuery notebook-style page animation on mobile devices?

Yes, jQuery notebook-style page animation is compatible with mobile devices. However, due to the varying screen sizes and touch interfaces, you may need to adjust the size of the elements and the sensitivity of the animation to ensure a smooth user experience.

How can I add sound effects to the page turn animation?

To add sound effects to the page turn animation, you can use the HTML5 audio API. You can create an audio element and play it when the animation starts. Make sure to preload the audio file to avoid any delays.

Is it possible to animate multiple pages at once with jQuery?

Yes, it is possible to animate multiple pages at once with jQuery. You can select multiple elements using a class or attribute selector and apply the animation to them. However, keep in mind that animating a large number of elements at once can be performance-intensive.

Can I use CSS transitions instead of jQuery for page turn animations?

Yes, you can use CSS transitions for page turn animations. CSS transitions provide a way to control animation speed when changing CSS properties. However, jQuery provides more flexibility and control over the animation, especially for complex animations.

How can I make the page turn animation responsive?

To make the page turn animation responsive, you can use CSS media queries to adjust the size and position of the elements based on the screen size. You can also use the .resize() method in jQuery to adjust the animation parameters when the window size changes.

Can I use jQuery notebook-style page animation with other JavaScript libraries?

Yes, jQuery can be used with other JavaScript libraries. However, you need to be careful about conflicts between the libraries. You can use the jQuery.noConflict() method to avoid conflicts with other libraries.

How can I add a shadow effect to the page turn animation?

To add a shadow effect to the page turn animation, you can use the box-shadow property in CSS. You can adjust the color, blur radius, and offset of the shadow to create a realistic effect.

Can I use jQuery notebook-style page animation in a WordPress site?

Yes, you can use jQuery notebook-style page animation in a WordPress site. You can add the jQuery code in a custom script file and enqueue it in your theme’s functions.php file.

How can I test the performance of the page turn animation?

You can use the performance tools in your browser’s developer tools to test the performance of the page turn animation. These tools can help you identify any bottlenecks in your animation and optimize it for better performance.