jquery使用CSS3实现文字动画效果插件Textillate.js
2018-03-25 01:08
1471 查看
Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件。Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效果应该于网页中的任何文字。
以上代码使用了默认的动画效果,如果你想改变动理效果,可以在html中调用data API
注意:你可以通过调用data api配置动画参数来控制每个li的动画效果。
inAnimationBegin.tlt – 动画进入开始时触发
inAnimationEnd.tlt – 动画进入结束时触发
outAnimationBegin.tlt – 动画退出开始时触发
outAnimationEnd.tlt – 动画退出结束时触发
end.tlt – ttextillate结束触发
$element.textillate(‘stop’) – 手动暂停或停止 textillate
$element.textillate(‘in’) – 当前文字动画进入时触发
$element.textillate(‘out’) – 当前文字动画退出时触发
[b]Textillate 下载 [/b] 案例演示
使用方法
引入核心文件<link href="assets/animate.css" rel="stylesheet"> <script src="http://libs.useso.com/js/jquery/1.9.0/jquery.min.js"></script> <script src="assets/jquery.lettering.js"></script>构建html标签
<h1 class="tlt">My Title</h1>写入JS,初始化
$(function () { $('.tlt').textillate(); })
以上代码使用了默认的动画效果,如果你想改变动理效果,可以在html中调用data API
<h1 class="tlt" data-in-effect="rollIn">Title</h1>你也可以在初始化时使用参数来改变
$('.tlt').textillate({ in: { effect: 'rollIn' } });当然,你也可以用Textillate给一个列表的文字都具有动画
<h1 class="tlt"> <ul class="texts"> <li data-out-effect="fadeOut" data-out-shuffle="true">Some Title</li> <li data-in-effect="fadeIn">Another Title</li> </ul> </h1> $('.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’) – 当前文字动画退出时触发
相关文章推荐
- jquery使用CSS3实现文字动画效果插件Textillate.js
- 使用HTML5和jQuery插件Reel实现一个超酷的星际争霸2兵种动画360度预览效果
- 使用jQuery来实现菜单文字和图标动画效果
- 购物车增加、减少商品时动画效果:jQuery.Fly.js插件使用方法
- 不使用JS,使用CSS3 target 以及 动画效果实现,点击一下弹出,并且保持弹出状态,然后再点击一下弹回的导航栏(或者可以叫做按钮)
- 使用Jquery分页插件jquery.pagination.js 实现无刷新分页效果
- Textillate.js – 实现动感的 CSS3 文本动画的简单插件
- jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
- 使用HTML5和jQuery插件Reel实现一个超酷的星际争霸2兵种动画360度预览效果
- jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
- 基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js
- Jquery使用animate实现css3的transform动画效果
- 使用js实现文字波浪效果
- jQuery-实现图片投影效果的js插件
- 使用js实现文字发光效果
- 纯CSS3实现多种不同的等待效果(无js/jquery/无图片)
- 在asp.net中使用JQuery的SlideViewer插件实现图片的滚动效果
- 使用jQuery插件realshadow实现超酷真实阴影效果
- jQuery插件EasyDrag轻松实现JS拖动的效果
- 使用jQuery插件realshadow实现超酷真实阴影效果