代码之家 › 专栏 › 技术社区 › Zachary Scott

如何做一个JavaScriptHTML5画布图像“翻页”像你通常在Flash中看到的?

canvas html5 javascript

Zachary Scott · 技术社区 · 15 年前

有没有人尝试过用你在AdobeFlash中经常看到的带有javascript和HTML5的画布标签的图像来重新创建页面翻转效果?

是否有任何框架或jquery插件可以实现这种效果?

使用Flash中的翻页功能,您可以抓取模拟书页的一角并像翻页真正的书页一样翻页。

我真的想学习如何使用javascript和HTML5的画布标记来完成这项工作,但不确定从何处开始,也不知道需要什么公式。

Example page flip in flash

9 回复 | 直到 9 年前

Michael Currie 9 年前

您可能会看到基于HTML5的页面翻转器的另一个(不错的)实现: http://jpageflipper.codeplex.com/

它真的很好,并且作为jquery插件实现。

Soufiane Hassou 15 年前

你可以试试 jFlip ,这是一个jquery插件,它不兼容IE,但我想这对你来说不是问题,因为你要的是HTML5。

iamalismith 13 年前

这是一个jquery插件,非常漂亮

http://www.turnjs.com/#home

Narendrakumar 14 年前

看到这个 http://www.20thingsilearned.com/home

Brad 13 年前

这里有一个HTML5页面翻转应用程序,我使用HTML5的canvas元素和jquery构建它。它叫 RectoVerso .

我也遇到过这个: http://romancortes.com/ficheros/page-flip.html
只需CSS3即可完成。

Andrew Patton Morgan T. 13 年前

有一个明确和信息丰富的 case study 关于基于中的页面翻转效果创建自己的页面翻转效果 20 Things I Learned About Browsers and the Web 这本书是奈伦德拉库玛联系的。这是一个很好的模仿实现,案例研究与相关的代码样本是清晰的,它是由开发这本书的FI公司的高级交互式开发人员编写的。

mieszkoz 14 年前

http://js1k.com/2010-first/demo/441
尽可能紧凑:d

Noelchan 14 年前

http://www.romancortes.com/blog/pure-css3-page-flip-effect/

Eli Grey 15 年前

最好用SVG <foreignObject> 元素和SVG转换。 This blog post by Mark Finkle 有一些关于旋转东西的信息,就像在“翻页/翻页”效果中需要做的一样。据我所知,只有Gecko1.9+和WebKit支持这一点。