html5文字飞入插件,jquery使用CSS3实现文字动画效果插件Textillate.js
jquery使用CSS3实现文字动画效果插件Textillate.js
Textillate是一款基于CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效果应该于网页中的任何文字。
使用方法
引入核心文件
构建html标签
My Title
写入JS,初始化
$(function () {
$('.tlt').textillate();
})
以上代码使用了默认的动画效果,如果你想改变动理效果,可以在html中调用data API
Title
你也可以在初始化时使用参数来改变
$('.tlt').textillate({ in: { effect: 'rollIn' } });
当然,你也可以用Textillate给一个列表的文字都具有动画
- Some Title
- Another Title
$('.tlt').textillate();
注意:你可以通过调用data api配置动画参数来控制每个li的动画效果。
参数选项
$('.tlt').textillate({
// the default selector to use when detecting multiple texts to animate
selector: '.texts',
// enable looping
loop: false,
// sets the minimum display time for each text before it is replaced
minDisplayTime: 2000,
// sets the initial delay before starting the animation
// (note that depending on the in effect you may need to manually apply
// visibility: hidden to the element before running this plugin)
initialDelay: 0,
// set whether or not to automatically start animating
autoStart: true,
// custom set of 'in' effects. This effects whether or not the
// character is shown/hidden before or after an animation
inEffects: [],
// custom set of 'out' effects
outEffects: [ 'hinge' ],
// in animation settings
in: {
// set the effect name
effect: 'fadeInLeftBig',
// set the delay factor applied to each consecutive character
delayScale: 1.5,
// set the delay between each character
delay: 50,
// set to true to animate all the characters at the same time
sync: false,
// randomize the character sequence
// (note that shuffle doesn't make sense with sync = true)
shuffle: false,
// reverse the character sequence
// (note that reverse doesn't make sense with sync = true)
reverse: false,
// callback that executes once the animation has finished
callback: function () {}
},
// out animation settings.
out: {
effect: 'hinge',
delayScale: 1.5,
delay: 50,
sync: false,
shuffle: false,
reverse: false,
callback: function () {}
},
// callback that executes once textillate has finished
callback: function () {}});
事件
start.tlt – textillate开始时触发
inAnimationBegin.tlt – 动画进入开始时触发
inAnimationEnd.tlt – 动画进入结束时触发
outAnimationBegin.tlt – 动画退出开始时触发
outAnimationEnd.tlt – 动画退出结束时触发
end.tlt – ttextillate结束触发
方法
$element.textillate(‘start’) – 手动开始或重启 textillate
$element.textillate(‘stop’) – 手动暂停或停止 textillate
$element.textillate(‘in’) – 当前文字动画进入时触发
$element.textillate(‘out’) – 当前文字动画退出时触发
html5文字飞入插件,jquery使用CSS3实现文字动画效果插件Textillate.js相关推荐
- html5文章标题定格,jQuery和css3文章标题动画特效
这是一款效果非常不错的jQuery和css3文章标题动画特效. HTML结构 所有效果的html结构是一样的,使用一个作为wrapper,给它一些margins和max-width.标题使用的是 标签 ...
- jQuery/CSS3炫酷动画效果插件 animate
jQuery是一款很强大的JavaScript框架,本文介绍的9个应用插件很多都是基于jQuery的,另外,CSS3的应用让这些插件增添了不少光彩,特别是第一个动画插件Animate.css非常实用, ...
- HTML2d动态效果图,html5+css3实现2D-3D动画效果实例
html5+css3实现2D-3D动画效果实例 主要实现的功能就是一些2D.3D的动画效果,如平移.缩放.旋转等等. 文章目录 html5+css3实现2D-3D动画效果实例 2D变换 3D变换 案例 ...
- js html页面切换效果,jQuery实现切换页面过渡动画效果
这篇文章主要介绍了关于jQuery实现切换页面过渡动画效果,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 这是一款效果非常酷的jQuery和CSS3通过AJAX调用切换页面过渡动画特效 ...
- html ie动画效果,css3强大的动画效果animate使用说明及浏览器兼容介绍
好久没更新blog,上次发文(11月8日)到现在刚好一个月,期间项目上的东西比较多,一时觉得时间比较紧,没来得及更新.这个星期总算是告一段落,补上几篇技术性的文章.好吧,第一篇是关于css3动画的使用 ...
- css3 动画图片滚动条,CSS3实现滚动条动画效果代码分享
一团网资讯 一团资讯 > css3 > CSS3实现滚动条动画效果代码分享 CSS3实现滚动条动画效果代码分享 2018-05-01 08:57:16 发布者:来源网络 先给大家一 ...
- css3 线条出现动画效果,CSS3实现的线条波浪动画效果
HTML结构 该css3线条波浪动画效果的HTML结构如下: CSS样式 然后通过下面的CSS代码来制作线条波浪动画效果. @keyframes move_wave { 0% { transform: ...
- 电脑分屏软件_Fcpx分屏插件 41组视频分割可自定义分屏动画效果插件 可分9屏 Split Pop...
Fcpx分屏插件 41组视频分割可自定义分屏动画效果插件 这是一套目前小编感觉最好用的Fcpx分屏插件,一.支持4K.二.最多可分9屏.三.可微调参数调整最佳展示.四.41种效果简洁大方,涵盖各类流行 ...
- 25个CSS3 渐变和动画效果教程
2019独角兽企业重金招聘Python工程师标准>>> 随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站 ...
最新文章
- 一起做激光SLAM:ICP匹配用于闭环检测
- LeetCode 12 Integer to Roman (整数转罗马数字)
- 教你配置windows上的windbg,linux上的lldb,打入clr内部这一篇就够了
- ECharts 点击非图表区域的点击事件不触发问题
- css 回到首页按钮,js+css实现回到顶部按钮(back to top)
- jfinal 获取路径
- html5---资料查询
- spss登录本地计算机,SPSS基本使用
- idea中的万能快捷键(alt + enter)
- vs2019编译cryengine失败问题处理
- 《python编程从入门到实践》第16章:收盘价均值的报错分析与解决
- 《启示录:打造用户喜爱的产品》第一部分 人员5 产品管理与软件开发
- css-图片模糊处理-blur
- 环境建环和给排水工程计算机应用试卷,环境建环和给水排水工程计算机应用教材内容...
- CNN Tensorflow 入门——以Cifar-10为例
- 链家网页爬虫_分享最近做的一个链家二手房爬虫和对爬到的数据进行可视化分析的案例...
- 电子英汉词典c语言设计报告,C语言课程设计——电子英汉词典汇编.doc
- 手把手教你使用hexo搭建属于你的个人博客
- 红米手机怎样升级android版本,红米2的手机系统是什么?红米2能升级安卓5.0吗?...
- 如何把爱奇艺qsv格式转换成mp3格式,已解决
热门文章
- 作为工程师,你真的了解无服务器?
- 在 520 这天,竟然有人把 Docker讲清楚了? | 原力计划
- 云存储精华问答 | 如何选择云迁移策略?
- php 模板解析,关于模板的原理和解析
- python编写程序接收字符串_Python字符串操作
- layui弹出层html,layui-弹出层
- html dom 知乎,知乎登录页 - 粒子运动效果
- 数据装载指定一张表或者多张表直接装载到目标表_10
- SpringBoot 使用LibreOffice 在线预览 doc,doxc,xls,xlsx,ppt,pptx 文件
- 如何快速下载CentOS7镜像