jquery文字动画特效插件分享 animatext.js文档
animatext.js文档
animatext是一款简单的jquery文字动画特效插件。通过该jquery文字动画插件,你可以在显示一串文字时,添加多种炫酷的动画效果。
使用方法
在页面中引入jquery和animatext.min.js文件,如果需要额外的动画效果,可以添加animate.min.css动画库。
<link rel="stylesheet" href="css/animate.min.css" type="text/css" />
<script src="path/to/jquery.min.js"></script>
<script src="path/to/animatext.min.js"></script>
HTML结构
你可以为任意标题文字,段落文字添加文字动画特效。例如:
<h3 class="demo">青春,人生当中最美好的时光,不知不觉就会逝去,正因如此,我们才更加感怀青春。</h3>
初始化插件
在页面DOM元素加载完毕之后,可以通过animatext()方法来初始化该jquery文字动画特效插件。
$(".demo").animatext();
配置参数
文字的显示分为单词和字母两种模式:
// 字母模式
$(".demo").animatext({
mode: "chars"
});
// 单词模式
$(".demo").animatext({
mode: "words"
});
可以通过reverse参数设置反向显示。
$(".demo").animatext({
reverse: true
});
可以通过infinite参数设置无限循环显示。
$(".demo").animatext({
infinite: true
});
可以通过speed参数设置文字动画的速度。
$(".demo").animatext({
speed: 150
});
你还可以通过group参数来对文字进行分组。
$(".demo").animatext({
group: true
});
可以通过random参数来设置随机显示文字。
$(".demo").animatext({
random: true
});
initDelay参数用于设置显示文字的延迟时间。
$(".demo").animatext({
initDelay: 0
});
timeToRelaunch参数用于设置两次循环文字动画之间的延迟时间。
$(".demo").animatext({
timeToRelaunch: 2000
});
最后,还有两个可用的回调函数。
$(".demo").animatext({
onBegin: function() {},
onSuccess: function() {}
});
animatext jquery文字动画特效插件的github地址为:https://github.com/oscarlijo/animatext
示例地址:http://www.oscarlijo.com/animatext/
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
h5 input,textarea属性placeholder样式修改失效问题解决
h5 input,textarea属性placeholder样式修改失效问题解决 有时候失效是因为前端框架已经设置了placeholder颜色,可以增加选择器权重,添加class,不建议用 !important ::-webkit-input-placeholder { /* WebKit browsers */ color: #fff; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #fff; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #fff; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #fff; }
- 下一篇
Echarts区域填充效果
Echarts区域填充效果 参考官方配置手册series.areaStyle.normal 附代码 series: [{ name: '平均温度', type: 'line', yAxisIndex: 1, data: [3.2, 3.3, 3.6, 4.5, 7.3, 11.6, 13.3, 13.9, 16.6, 17.5, 19.0, 19.2] }, { name: '实测温度', type: 'line', areaStyle: { normal: { color: { type: 'linear',//设置线性渐变 x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'green' // 0% 处的颜色 }, { offset: 1, color: 'white' // 100% 处的颜色 }], globalCoord: false // 缺省为 false }, } }, yAxisIndex: 1, data: [3.0, 2.6, 3.2, 3.5, 6...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- SpringBoot2全家桶,快速入门学习开发网站教程
- SpringBoot2初体验,简单认识spring boot2并且搭建基础工程
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- SpringBoot2整合Redis,开启缓存,提高访问速度
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- SpringBoot2更换Tomcat为Jetty,小型站点的福音
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装