web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
文字效果
基于animate.css的jQuery文字动画插件
分类:
文字效果
日期:
2024-05-14
点击(0)
评论(0)
演 示
免费下载
简介
首先要在页面中引入jQuery文件和 Animate.css 文件以及 morphext.min.js和morphext.css文件。 将你想要动画的文字句子封装到一个元素中,并且用逗号隔开每一个句子。 ```html I am a
So Simple, Very Doge, Much Wow, Such Cool
Text Rotator ``` 然后可以在元素上调用Morphext()方法来启用插件: ```html $("#js-rotating").Morphext(); ``` ##### 可用参数 - animation:类型:string,CSS动画的类型,可以是 Animate.css 中任何一种可用的动画类型。默认值:bounceIn。 - separator:类型:string,用于分割句子字符串的符号。可以改变这个符号,例如使用"|": So Simple | Very Doge | Much Wow | Such Cool。默认值:, - speed:类型:int,文字动画的时间间隔,单位毫秒,默认值2000。 下面是一个例子: ```html $("#js-rotating").Morphext({ animation: "fadeIn", // Overrides default "bounceIn" separator: "|", // Overrides default "," speed: 3000 // Overrides default 2000 }); ``` 该文字动画插件在很大程度上依赖于Animate.css来制作两个句子之间的平滑高质量的过渡动画。默认的动画速度可以通过CSS来修改: ```html #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来编写回退的方法。
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告