5 Free jQuery Page-Flip Plugins For Book-Like Interfaces

Mimicking the interactions offline is always popular in the world of computers.

Page-flips are one of the most popular ones of them in web design. They are implemented very successfully in Flash, many websites, documents, magazines are being created/published each day.

With the capabilities of new web technologies, we can also expect them to be accomplished using only HTML, CSS and JavaScript (remember "20 Things I Learned"? It is also open source).

There are several easy-to-use jQuery plugins that offer a good page-flip experience and help creating book-like interfaces. Here they are:

Turn.js

turn.js - page turning effect with jQuery

A jQuery plugin that has lovely and smooth page flip transitions.

The first page acts as the cover and the rest can be browsed by simply turning the pages from any desired corner.

Turn.js is only 15kb, works on mobile & tablet browsers as well and makes use hardware acceleration.

jPageFlip

jPageFlip - JavaScript Page Flip

jPageFlip is a highly customizable jQuery plugin for book-like interfaces.

It can -optionally- flip pages on mouse clicks and has support for transparent + semi-transparent image files.

P.S. The plugin performs better on WebKit browsers.

Booklet

Booklet jQuery Turning Page Plugin

Booklet is probably the plugin with most options in this list as it allows configuring each variable.

The JavaScript turning page effect is not that strong as it keeps things within corners (no overflows from the book itself) but works solid.

Pages can be turned manually, via keyboard, prev-next links or automatically (autoplay). Each page also has a unique URL (using hashtags).

It has support chapters, ca show page numbers and callbacks exist for further interaction.

imBookFlip

imBookFlip jQuery Page Flip

imBookFlip plugin can display the book-like content in an iframe or directly on the page.

Its pages can be set to turn when manually clicked or as an auto play, sadly, no support for dragging a page.

Also, its API allows directly pointing to a desired page.

FlipPage

FlipPage

This plugin also keeps the page flip effect inside/over the images displayed (that ends up in a 2D-like experience).

It makes use of HTML5-CSS3 + hardware acceleration and works also in mobile browsers.

Other Solutions

The list above includes the latest and more frequently updates ones. However, there are few more options like:

Any better JavaScript alternatives with (or without) jQuery? Please feel free to share them.

  • You definitely forgot one great plugin I discovered while searching for a pageflip plugin for our project http://www.philomelos.com – it’s the BookReader from Archive.org:
    http://openlibrary.org/dev/docs/bookreader
    Very fast forward compared to booklet or something, just a little messy documentation.

  • I like this interface.
    Imagine that we can make websites which can navigate their pages like books… hmm.
    Like an album book.
    In some pages can slide images. In some can read. and in some can write…
    And this is the another one:
    http://tympanus.net/codrops/2010/12/14/moleskine-notebook/

  • Such a nice round up of web pages plugins, this is very nice to see them.

  • Thanks !

    I know someone of this but i discover others scripts !

    It’s very usefull

  • I used the one from Built by Will. The only thing that was not so good was the fact that you can’t omit certain pages (like left side or so).

    I definitely recommend it. You can see the project here:

    http://www.candelasmonterrey.com/candelas/catalogo/

  • Perfect! Thank you! I was searching for it to use on my Journal so long, nice comparision.

    Your article helped me to sort out I need a change from booklet to turn.js 🙂

    Awesome!

  • Sometimes people may need a stand-alone software to make the page flip book,like axmag, it can convert pdf to flash flip book,you just embed the page flipping output in your website,then you can use it everywhere.

  • Have been looking for something along these lines for a client I’m working with… How I’m looking for something along the lines of issuu.com which would allow the user/client to upload pdf files which would be the source for the page flip content? Any ideas? Maybe something above would work like this but I’m thinking I’m looking something a little more advanced maybe…

  • Wolfman

    turn.js appears to be commercial..

  • @Wolfman,

    Sadly, they seemed to change the license (although there is still a free version).

  • I used turnjs free version for my site. Check it out at http://www.vspiritcruises.com/vspirit-classic/flipbook/

    Thanks for sharing this useful collection.

  • Alfredo

    Good Morning

    I need a really good Flipping book that allow to write using the keyboard in full screen, many flipping boos doesnt allow it, because the flash player version dont allow it..

    any help¡?

    TY

  • thx, I’m trying turn.js right now

  • Very cool interfaces… easly personalizables script 🙂

Search