Morphext是一款简单、高性能和跨浏览器的jQuery文字动画插件。该插件基于 Animate.css 。你可以设置使用多个不同的句子,Morphext会以你指定的CSS动画方式轮流显示它们。Morphext所做的事情是隐藏前一个文本短句,然后使用下一个来替换它。插件中已经为跨浏览器处理好了所有浏览器厂商的前缀问题,它可以为我们提供非常酷的文字动画效果。
使用方法
首先要在页面中引入jQuery文件和 Animate.css 文件以及 morphext.min.js和morphext.css文件。
将你想要动画的文字句子封装到一个元素中,并且用逗号隔开每一个句子。
I am a So Simple, Very Doge, Much Wow, Such Cool Text Rotator
然后可以在元素上调用Morphext()
方法来启用插件:
$("#js-rotating").Morphext();
可用参数
- animation:类型:string,CSS动画的类型,可以是 Animate.css 中任何一种可用的动画类型。默认值:bounceIn。
-
separator:类型:string,用于分割句子字符串的符号。可以改变这个符号,例如使用"|":
So Simple | Very Doge | Much Wow | Such Cool
。默认值:,
- speed:类型:int,文字动画的时间间隔,单位毫秒,默认值2000。
下面是一个例子:
$("#js-rotating").Morphext({ animation: "fadeIn", // Overrides default "bounceIn" separator: "|", // Overrides default "," speed: 3000 // Overrides default 2000 });
该文字动画插件在很大程度上依赖于Animate.css来制作两个句子之间的平滑高质量的过渡动画。默认的动画速度可以通过CSS来修改:
#yourElement, .yourClass { /* Overrides Animate.css 1s duration */ -vendor-animation-duration: 3s; }
一些问题
Animate.css的一些动画效果如"up"或"down"可能会超出窗口,这不是一个bug,解决的方法是在其父元素中使用overflow: hidden;
。
插件中需要使用js来添加或移除Animate.css的class来执行相应的动画效果,如果浏览器不支持js,那么将看不到任何效果。
Animate.css依赖于CSS3 animations和transformations。如果浏览器不支持CSS3,该插件仍然会进行句子转换,但是没有动画效果,插件中没有提供回退的方法,如果你需要回退,可以使用Modernizr来编写回退的方法。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!