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:


Loading pages...

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

Tags: jquery advanced animation, jquery animation plugin, jquery notebook animation, jquery page flip
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.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • 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

      setInterval(function(){pollHash()}, 250);

      with this code:

      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


      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/

      //add the link
      $(‘body’).append(‘Go to Page 1‘);

      //add the click event
      $(‘#gotoPage1′).live(‘click’, function(e)
      $.booklet.gotoPage(1); //go to beginning

      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!


  • 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:


  • Mohan

    Can we do a data bound aspx forms like the flip style instead of tab or something?

  • http://www.scarphout.be Marc


    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! :)

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.