Is it possible to achieve paper-turn effect in HTML without using flash?

Question

Hi, I'm aware of several flash-based commercial implementation like flashpageflip. But I'm wondering if it possible to achieve without using flash?

Any help will be much appreciated. Thank you.

Agung Indrawan.

Answer 1

Scott Schiller does some amazing stuff with JavaScript animations regarding the whole page. I know if you could cut his source code up and modify the events, you'd be able to achieve the effect with his event engine. However, it'd take a lot of work and I'm not sure exactly how much gain the effect would get you given the intensity of the animation script. I know it can be done though.

http://www.scottschiller.com/

Answer 2

There used to be a tutorial on SitePoint for it, but I couldn't find it just then with Google.

If you could batch some page flips for every page, you could turn them into a GIF or step through them with JavaScript.

Answer 3

Hi

Check this

http://grasshopperpebbles.com/demos/index.php/bookflip/autoflip

Answer 4

Here are a couple.

http://www.webresourcesdepot.com/attractive-jquery-page-curl-plugin/

http://www.sitepoint.com/examples/jquery/animate4.php

Answer 5

Indeed... it can be achieved with JQuery:

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

or something simpler...

http://www.sohtanaka.com/web-design/simple-page-peel-effect-with-jquery-css/

Answer 6

If you are looking for something more fancy, like dragging the corner of the page to turn it, it could probably be achieved using SVG + JavaScript. I haven't tried though, but it seems theoretically doable ;-)

Answer 7

I'm sorry, since I'm not familiar with SO, I end up creating new account.

@slebetman: Yes, I've trying to search SO before posting my question, but fail to find relevant question, because my wrong choice of keyword (page turn vs. paper turn).

My reluctance for using flash is for the fact Google can't index it, because most of the content will end up in this "paper-like" page. But after briefly examining various javascript technique presented in the answer, it seems they all using image, and google can't index image content.

It seems I have convice my boss to dump his idea. Thank you for all the answer.

Answer 8

Paul Brunt has a SVG solution here:

http://www.paulbrunt.co.uk/2009/11/07/svg-flip-blog-post/

It's a little fiddly, and does use PDF but holds up to the commercial Flash based browsers very well.