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.
Cartoon and Comic-Book Effect Action. Instantly turn your photos into a cool comic book with this awesome Photoshop action. This action can work with any size image and includes a help file along with the download for more helpful information. ComicBook iT - Comic Book Image Converting Action. Today’s the and I know a lot of people are still looking for a fast and simple way they can get that super cool page turning effect in PDF. Instead of losing valuable time searching for free page turning software using PDF, savvy creators today are finding gratis online services for turning a web page into a PDF.
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!
RagalanteRagalante
3 Answers
Does the jQuery Sexy Curls plugin suit your needs? (while keeping in mind that no one is going to have exactly what you want)
Alex SextonAlex Sexton
You must use an image to give the impression of a page turning.
SampsonSampson
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
EDIT2: I've contacted the original author and posted a comment on the site with my updated script, but he strangely simply deleted my post with no reply... I really want to make sure I don't want to appropriate the creation of anyone, as I say bellow all credit goes to him alone!
(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)
LoudenvierLoudenvier