Turning page effect with html content, not just images! Using jQuery

Question

I have a web page and I want to add a nice turning page effect. I have seen lots of jQuery plugins but I had some issues and dislikes.

This is what I want:

• While the animation is running, I have to be able to see the content in the turning page.
• I don't want just to slide the content. I need something that looks like a book page turning.

The plugin I liked the most is jFlip, but it just works with images. I'd like this effect but working with standard HTML code in it.

Does anyone know how to do this?

Thanks!

Answer 1

You must use an image to give the impression of a page turning.

Answer 2

Does the jQuery Sexy Curls plugin suit your needs? (while keeping in mind that no one is going to have exactly what you want)

Answer 3

Originally I've written this: AFAIK there is not a single really great page turning effect for jQuery. All of them (few) have shortcomings. Here are my findings:

EDIT: I've reconsidered this and now I think that imBookFlip is indeed a great page turning effect written in jQuery. Why I've changed my opinion? It's because I've modified the script myself to overcome one shortcoming of the animation as my original post bellow shows...

imBookFlip: http://grasshopperpebbles.com/ajax/jquery-plugin-imbookflip-page-turning-without-flash/

This is exactly what we are looking for... I mean, it almost is! It would be perfect if the actual page flipping effect didn't leave the old image in-place, only substituting it for the new page after the flip is completed. But that is not that much of a problem (SEE BELLOW FOR MY MODIFIED SCRIPT WITH THIS ISSUE RESOLVED)

It is good in many ways because even though all samples on the page (imBookFlip Demo) apparently uses only images, it works with div tags, so any content is possible (in the samples, they used empty div elements with background images, so you can combine both images and content). I'm creating a portfolio for my wife, who is a Librarian, and I'm using this component to create a book with her information, it is still a work in progress, the fonts used were just for a showcase, but you can get the idea taking a look at: http://lucianasciammarella.com.br

EDIT: I've just updated the script to make the animation smoother by not leaving the old image in place while animating the page flip. Now it looks much more realistic. My wife's portfolio page is already running the updated script and it can be downloaded directly here: http://lucianasciammarella.com.br/jquery.imBookFlip-0.6A.js

(keep in mind that all I did was to add two lines of code, all the credits go to the original author, and since I didn't change anything else, to learn how to use it, please refer to the original site, or see my wife's page source code...)

Sponsor Flip Wall With jQuery: http://tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/

This is a simpler flip, but amazing in many ways. It can be extended to work as a page book flip. It works with any content too. The only problem is that currently it flips over the center of the page, not like a book page... (after all it was not intended for a page flip effect...)

Hope these two can help you... Now if you want a really neat page flip effect, you can use DevExpress Silverlight book component (go to http://demos.devexpress.com/AgCoreDemos/ click in Controls on the left, and then choose the Book or Book Calendar demo)