Amazing jQuery Notebook Page Flip Animation

Sam Deering
Tweet

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

jquery-notebook-flash-animation-page-layout

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:

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...</p>
				<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/

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • 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