These days similar thing happened to books, almost no one reads books made of paper, cause it’s much easier to read an eBook that costs mostly like a book cover, or comes free to download. But if we touch upon prices; eBooks are way cheaper than paper books, some eBook reader cost less than a whole paper book. Anyways buying eBook is much better, just think about all those trees cut to print your favorite Twilight series 😉
But if you are one of those old-school guys who still read paper books, has a subscription to the newspaper and runs a website…Maybe you’d want to give it more familiar and convenient form? Than you need to consider pageflip effect. This thing is from those skeuomorphic tricks that imitate well-known objects. In this case it’s the imitation of a book. Below you will find some tutorials, plugins and examples of pageflip effect. So let’s start with some plugins.
jQuery pageflip plugins are ideal for websites with large amount of text and images. Instead of displaying all your text, links and images on a long boring page, you can make your presentation more interactive and animated with flip page effects.
WowBook is jQuery plugin that allows you to create a online publication (like a book or magazine) with 2 different page flipping effects.
jQuery Flipbook Slider is a lightweight jQuery plugin for flipping pages effect. It can be used with any content: text, html, iframes, videos, flash (swf) etc. You can customize it easily with CSS (background images, font family and color etc.). The plugin can be used for albums, presentations, books and notepads.
The imBookFlip plugin can load a book in an iframe or directly on the page. The book’s pages can be set to turn when manually clicked only, begin auto flip (turn automatically) as soon as the html page loads, or begin auto flip when first page (front cover is clicked). Adding audio is easy because Sound Managercan be used with the plugin.
Turn.js is a plugin for jQuery that adds a beautiful transition similar to real pages in a book or magazine for HTML5. Being inspired by the effect of iBooks and Maps for iOS, two classes are created: one for manipulating the overall publication and another for each individual page.
jQuery Responsive flipbook no Flash Player needed (works on the Ipad etc.)
Here you will find out how to use and customize the brilliant jQuery Booklet Plugin.
A tutorial on how to create a fullscreen pageflip layout using BookBlock. The idea is to flip the content like book pages and access the pages via a sidebar menu that will slide out from the left.
It converts this:
1 2 3 4 5
<ol id="foo"> <li>Page 1</li> <li>Page 2</li> <li>Page 3</li> </ol>
Into a page flippable layout using pure CSS3 animations. Currently works in Safari and iPhone.
Joe Lambert walks you through creating a stunning page turn effect to enhance a portfolio image gallery.
In this tutorial you will learn how to create a circle with a handle which will open once the little handle is clicked, creating a realistic 3D flipping effect with the help of CSS 3D transforms and shadows/gradients.
Going from print to Web just got a lot easier with Adobe InDesign CS4. In the past, we concentrated on going from InDesign to HTML or PDF. While the interactive features in InDesign still work nicely for PDF, they also now work for going to Flash. There are two ways to turn your InDesign document into Flash content. Let’s take a look at both of them.
2. Pat Fallon
4. TV ADS
Now it’s time you to share some thoughts about PageFlip layouts. Have you ever created them, can you describe their usability.