Skip to main content

Amazing jQuery Notebook Page Flip Animation

By Sam Deering

JavaScript

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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

Loading pages...

Slider Gallery

This tutorial is about creating a creative gallery...

Article Demo
...

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

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

Learn valuable skills with a practical introduction to Python programming!


Give yourself more options and write higher quality CSS with CSS Optimization Basics.