JavaScript
Article
By Sam Deering

Amazing jQuery Notebook Page Flip Animation

By Sam Deering

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

--ADVERTISEMENT--

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

Loading pages...

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

Recommended
Sponsors
The most important and interesting stories in tech. Straight to your inbox, daily. Get Versioning.
Login or Create Account to Comment
Login Create Account