Textillate.js 动感十足的 CSS3 文本动画插件
Textillate.js是一个动感十足的CSS3文本动画插件,集成了一些非常好的 JavaScript 库,提供一个方便使用的文本动画效果,可以让你为网页中的文字运用各种动画,它整合了两个流行的工具库 animate.css 和 lettering.js 来提供易于使用的插件,能够把 CSS3 动画应用到文本内容上。
只要引入 textillate.js 和它依赖的文件就能够给你的内容加上独一无二的特效。
使用方法
加载所需必要的JS和CSS文件。
<link href="assets/animate.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="assets/jquery.lettering.js"></script> <script src="jquery.textillate.js"></script>
编写HTML代码
<h1 class="tlt">My Title</h1>
编写JavaScript代码
$(function () { $('.tlt').textillate(); })
这将使使用默认选项。改变缺省值,您可以使用HTML数据API:
<h1 class="tlt" data-in-effect="rollIn">Title</h1>
或通过选项初始化(见下面的选项的完整列表):
$('.tlt').textillate({ in: { effect: 'rollIn' } });
你也可以告诉textillate.js动画列表标记:
<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();
注意你可以控制每个文本动画参数(<li>)使用数据 API。
配置动画效果
您可以自定义动画的切换效果,使用data属性设置动画的名称即可,以下为可用的动画效果名称。
$('.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 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 }, // out animation settings. out: { effect: 'hinge', delayScale: 1.5, delay: 50, sync: false, shuffle: false, } });
注意:这个插件的动画效果不支持旧版本的浏览器。
插件事件
Textillate triggers the following events:
start.tlt
- triggered when textillate startsinAnimationBegin.tlt
- triggered when the in animation beginsinAnimationEnd.tlt
- triggered when the in animation endsoutAnimationBegin.tlt
- triggered when the out animation beginsoutAnimationEnd.tlt
- triggered when the in animation endsend.tlt
- triggered when textillate ends
$('.tlt').on('inAnimationBegin.tlt', function () { // do something });
插件方法
$element.textillate('start')
- Manually start/restart textillate$element.textillate('stop')
- Manually pause/stop textillate$element.textillate('in')
- Trigger the current text's in animation$element.textillate('out')
- Trigger the current text's out animation
相关链接
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论