Amazing jQuery Notebook Page Flip Animation

By Sam Deering December 22, 2010

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


	
	

	Loading pages...

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

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

jquery advanced animation, jquery animation plugin, jquery notebook animation, jquery page flip

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.

http://www.e11world.com e11world

One of the best jQuery plugins I’ve seen in a long time. This is very easy to implement.
http://www.swimminghippo.co.uk web design west midlands

Wow… Now this is a great a powerful plugin!

Very impressed!
http://www.homertechnologies.ca carrie

Beautiful, just the jquery effect i was looking for. Going to use in my next project for sure. Thanks a lot.
http://studioviabr.com.br Rodrigo Valim

Not work in ie -9
- http://www.sdiel.org/ Sebastian
  
  It won’t work in IE 9 when the ‘hash’-option is set to true.
  The error occurs because there is a bug in jquery.booklet.1.1.0.js on line 478:
  
  clearInterval() is called without it’s NOT optional parameter. It seams that all other browsers ignore this error and work around it, but not IE 9 :-/
  So, to resolve this error add a global variable to save the interval reference:
  ... ;(function($) {
  var mybookletInterval = false;
  $.fn.booklet = function(options){ ...
  Then replace the code on line 478
  clearInterval(); setInterval(function(){pollHash()}, 250);
  with this code:
  clearInterval(mybookletInterval); mybookletInterval = setInterval(function(){pollHash()}, 250);
  
  After that the script worked for me in ID 9, too.
Julie

Love this plugin. Anyone know how I could make it start over automatically once it gets to the last page?
- jquery4u
  
  @Julie,
  
  I just had a peek at the code and there is a gotoPage() function. But i had a go and it’s not playing ball.
  
  Here is my attempt. http://jsfiddle.net/rthFt/
  
  (function($)
  {
  //add the link
  $(‘body’).append(‘Go to Page 1‘);
  
  //add the click event
  $(‘#gotoPage1’).live(‘click’, function(e)
  {
  console.log(‘run’);
  e.preventDefault();
  $.booklet.gotoPage(1); //go to beginning
  });
  })(jQuery);
  
  If this was working it would animate the pages flipping backwards.
  
  Sorry I couldn’t get it working, when i get a spare sec i’ll have another go!
  
  Cheers
  Sam
http://www.xenon-webdesign.co.uk Steve Walker

Great plugin, thanks for sharing. I have a small problem though. I am trying to get this to work in conjunction with Lightbox so the user can click each page and it will enlarge in the usual Lightbox way.

It appears to not work though, does anyone know if using this with another plugin is supported? I suspect the different Javascript files conflicting. Here is my implementation:

http://marlovian.xenon-webdesign.co.uk/
Mohan

Can we do a data bound aspx forms like the flip style instead of tab or something?
http://www.scarphout.be Marc

Hi,

is it possible to use the whole page for the images?

Link: http://www.scarphout.be/boekjes/Boekje145/Default.html
http://www.fidaato.in aadil

thanx for jquery instead of heavy flash
Phoenix

Really nice code, but how I wish this were responsive. Without being responsive, this is a bit like eye candy.
Rakin

I liked but I prefer turnjs.com looks better.
Pingback: 8 jQuery Book Plugins | jQuery4u()
Arvind Dubey

how to call onclick
Pingback: 20+ Powerful jQuery Flipbook Plugins()
Pingback: 20+ Powerful jQuery Flipbook Plugins | Good Favorites()
Pingback: Fresh and Useful Collection of JQuery Plugins | Web Design Burn()
Pingback: 20+ Powerful jQuery Flipbook Plugins - TechBlog()
Pingback: Awesome jQuery Flipbook / Magazine Plugins - musegizmo.com()
Retno

impressive. Good idea! :)