Search code examples
javascriptjquerycssjquery-plugins

iBooks-like page flip in JavaScript and CSS?


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 comes 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.com/code/booklet/

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

http://www.romancortes.com/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.


Solution

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