JQUERY教程

当前位置: HTML5技术网 > JQUERY教程 > 基于animate.css的jQuery文字动画插件

基于animate.css的jQuery文字动画插件

Morphext是一款简单、高性能和跨浏览器的jQuery文字动画插件。该文字动画jQuery插件基于Animate.css。你可以设置使用多个不同的句子,Morphext会以你指定的CSS3动画方式轮流显示它们。

查看演示

基于animate.css的jQuery文字动画插件.zip


使用方法

首先要在页面中引入jQuery文件和 Animate.css 文件以及 morphext.min.js和morphext.css文件。
将你想要动画的文字句子封装到一个元素中,并且用逗号隔开每一个句子。

  1. I am a So Simple, Very Doge, Much Wow, Such Cool Text Rotator
复制代码
然后可以在元素上调用Morphext()方法来启用插件:

  1. $("#js-rotating").Morphext();
复制代码
可用参数

  • animation:类型:string,CSS动画的类型,可以是 Animate.css 中任何一种可用的动画类型。默认值:bounceIn。
  • separator:类型:string,用于分割句子字符串的符号。可以改变这个符号,例如使用"|": So Simple | Very Doge | Much Wow | Such Cool。默认值:,
  • speed:类型:int,文字动画的时间间隔,单位毫秒,默认值2000。

下面是一个例子:

  1. $("#js-rotating").Morphext({
  2.     animation: "fadeIn", // Overrides default "bounceIn"
  3.     separator: "|", // Overrides default ","
  4.     speed: 3000 // Overrides default 2000
  5. });
复制代码
该文字动画插件在很大程度上依赖于Animate.css来制作两个句子之间的平滑高质量的过渡动画。默认的动画速度可以通过CSS来修改:

  1. #yourElement, .yourClass {
  2.     /* Overrides Animate.css 1s duration */
  3.     -vendor-animation-duration: 3s;
  4. }
复制代码
一些问题

Animate.css的一些动画效果如"up"或"down"可能会超出窗口,这不是一个bug,解决的方法是在其父元素中使用overflow: hidden;。

插件中需要使用js来添加或移除Animate.css的class来执行相应的动画效果,如果浏览器不支持js,那么将看不到任何效果。
Animate.css依赖于CSS3 animations和transformations。如果浏览器不支持CSS3,该插件仍然会进行句子转换,但是没有动画效果,插件中没有提供回退的方法,如果你需要回退,可以使用Modernizr来编写回退的方法。

via:http://www.htmleaf.com/jQuery/Text-Link-Effects/201502021316.html

【基于animate.css的jQuery文字动画插件】相关文章

1. 基于animate.css的jQuery文字动画插件

2. 一个简单的CSS3文字动画插件textillate

3. 带进度条的jQuery文件拖放上传插件

4. Lazy Line Painter – 很有趣的 jQuery 路径动画插件

5. Lazy Line Painter – 很有趣的 jQuery 路径动画插件

6. 7个炫酷的jQuery动画插件及源码

7. 10个web前端基于jQuery动画插件及源码

8. 基于Threejs的jQuery 3d图片旋转木马特效插件

9. jQuery文件夹管理插件 可删除文件夹

10. 7款很酷的JQuery动画和实用的JQuery应用

本文来源:https://www.51html5.com/a1486.html

点击展开全部

﹝基于animate.css的jQuery文字动画插件﹞相关内容

「基于animate.css的jQuery文字动画插件」相关专题

其它栏目

也许您还喜欢