Okay, I've googled all the way, hopefully someone here knows a place to point me to.

I'm searching for a page flip animation for JavaScript that es close to what Apple did with iBooks, for only one page flipping over to reveal only the next page.

(EDIT: Maybe my description wasn't clear enough: I'm looking for a page flip effect that transitions one whole usual HTML website, for example imagine this stackoverflow page, to another one, for example the "Add Question" screen by applying a page flip effect, for example when "Ask Question" was clicked. I know this might be a hard-to-realize thing to do, as it involves having the data ready, showing one page, making the transition-effect and then showing the second page while the first page can be released from memory. Nevertheless, with all the HTML5, JS and CSS craze I hoped that someone had made such a transition-effect, and I hope that if there is one out there, someone here knows where to find it. Sadly I suck too much at JS and CSS to get it done myself.)

Here's a nice CSS-only example (always shows two pages width):

/

And here's another example (that sadly needs to display two pages after it was flipped):

.html

I would need that effect to only flip around one page and also just to show the second HTML page after it is flipped. Do you know a library or a ready to use script that does this? I definitely don't want Flash or Silverlight to be a part of the solution.

Okay, I've googled all the way, hopefully someone here knows a place to point me to.

I'm searching for a page flip animation for JavaScript that es close to what Apple did with iBooks, for only one page flipping over to reveal only the next page.

(EDIT: Maybe my description wasn't clear enough: I'm looking for a page flip effect that transitions one whole usual HTML website, for example imagine this stackoverflow page, to another one, for example the "Add Question" screen by applying a page flip effect, for example when "Ask Question" was clicked. I know this might be a hard-to-realize thing to do, as it involves having the data ready, showing one page, making the transition-effect and then showing the second page while the first page can be released from memory. Nevertheless, with all the HTML5, JS and CSS craze I hoped that someone had made such a transition-effect, and I hope that if there is one out there, someone here knows where to find it. Sadly I suck too much at JS and CSS to get it done myself.)

Here's a nice CSS-only example (always shows two pages width):

http://builtbywill./code/booklet/

And here's another example (that sadly needs to display two pages after it was flipped):

http://www.romancortes./ficheros/page-flip.html

I would need that effect to only flip around one page and also just to show the second HTML page after it is flipped. Do you know a library or a ready to use script that does this? I definitely don't want Flash or Silverlight to be a part of the solution.

• javascript
• jquery
• css
• jquery-plugins

4 Answers 4

Turn.js seems to be a good starting point. The code is up on GitHub.

This is the nearest i could find with single-page flip like iBooks but still very weird pared to iBooks.

http://www.jquery.info/spip.php?article78

http://www.jquery.info/scripts/jFlip/demo.html

By the way, i'm trying to achieve something just like you, almost like an 'iBooks clone'.

Here is some CSS3 animation, I'm studying it to try make something like (but without 2nd page).

http://romancortes./ficheros/page-flip.html

I recently made a pageflip/flipbook effect in pure CSS. The nice thing is that it actually has a nice 3d effect to it. Even though it only works nicely in Google Chrome at the moment, this might be a nice starting point for anybody interested.

http://dream-world.us/2011/12/05/animated-css3-pageflip-flipbook-with-a-little-jquery/

The blogpost includes a fiddle, so feel free to play around with the code..

Cheers

In my Honest Opinion: the coolest turn/flip book i know is this: TurnJS