在JavaScript和CSS中类似iBooks的页面翻转?

Akk*_*kku 7 javascript css jquery jquery-plugins

好吧,我一直用Google搜索,希望有人在这里知道一个指向我的地方.

我正在寻找一个适合JavaScript的页面翻转动画,这与Apple对iBooks所做的很接近,只有一页翻页只显示下一页.

(编辑:也许我的描述不够明确:我正在寻找一个页面翻转效果,将一个完整的常用HTML网站,例如想象这个stackoverflow页面,转换到另一个,例如通过应用"添加问题"屏幕页面翻转效果,例如当点击"提问"时.我知道这可能是一个难以实现的事情,因为它涉及准备好数据,显示一个页面,制作过渡效果然后显示第二页,而第一页可以从内存中释放.然而,随着所有的HTML5,JS和CSS热潮,我希望有人做过这样的过渡效果,我希望如果有一个在那里,有人在这里知道在哪里可以找到它.可悲的是,我在JS和CSS上太过分了,以便自己完成它.)

这是一个很好的CSS示例(总是显示两页宽度):

http://builtbywill.com/code/booklet/

这是另一个例子(遗憾地需要在翻转后显示两个页面):

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

我需要这个效果只翻转一个页面,也只是在翻转后显示第二个HTML页面.你知道一个库或一个可以使用的脚本吗?我绝对不希望Flash或Silverlight成为解决方案的一部分.

Rap*_*DDL 6

这是我能找到的最接近iBooks的单页翻页,但与iBooks相比仍然非常奇怪.

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

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

顺便说一句,我正在努力实现像你一样的东西,几乎就像一个'iBooks克隆'.

这是一些CSS3动画,我正在研究它以尝试制作类似的东西(但没有第二页).

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

  • @Akku只是一个更新,我发现了一些不错的东西:http://www.html5rocks.com/en/tutorials/casestudies/20things_pageflip.html(演示:http://www.html5rocks.com/static/demos/20things_pageflip /example/index.html)..它是画布但反正很好的效果. (2认同)

Pas*_*auf 5

Turn.js似乎是一个很好的起点.代码在GitHub上.