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
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 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 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 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
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:
- jFlip
- CSS Page Flip (works better in WebKit)
Any better JavaScript alternatives with (or without) jQuery? Please feel free to share them.
No comments:
Post a Comment