Split Flap文本动画Jquery

Posted 2023-05-08

【中文标题】Split Flap文本动画Jquery

【英文标题】：Split Flap text animation Jquery

【发布时间】：2012-06-26 07:56:11

【问题描述】：

能否请您推荐一个与此演示相同的文本动画的 Jquery 插件：http://www.youtube.com/watch?v=1sn5FCSIfuE&feature=youtu.be

这是用 Flash 制作的文本动画（在此处查看：http://ae.tutsplus.com/tutorials/motion-graphics/create-a-split-flap-type-display/），但我希望在纯 javascript、CSS 和 html 中具有相同的效果。

感谢您的建议， 狮子座

【参考方案1】：

使用一些 CSS3 3D 变换是可行的。虽然它不适用于所有浏览器，但可以做到。

这是一个非 css3 版本（风格较少且没有 3D）：http://net.tutsplus.com/tutorials/html-css-techniques/learn-how-to-create-a-retro-animated-flip-down-clock/

这里有一个（几个）CSS3 演示：http://rupey.org/demo/css3-clock/、http://mathieujouhet.com/demos/flipping-clock/

【讨论】：

感谢@Bruno 发布我的演示。虽然应该注意它现在只能在 Safari 上运行（过去在 Ffox、Chrome 和 Opera 中都能完美运行，但自从我上传了演示后，实现似乎发生了变化）。

【参考方案2】：

我在 Javascript 中找到了这个解决方案： http://cnanney.com/journal/demo/apple-counter-revisited/

【参考方案3】：

不是 3D - 但相同的原理：

http://keith-wood.name/flightBoard.html

【参考方案4】：

我不确定这是您要查找的内容，但您可以随时查看：

Textillate.js - A jQuery Plugin For CSS3 Text Animations

Textillate.js 让您可以更轻松地为文本添加动画效果，如闪光、反弹、摇晃等。我已经尝试过了，它非常棒，并且是基于提供的 JavaScript 库构建的。