textillate.js 介绍
Textillate是一款基于jquery的使用css3实现 文字 动画的小巧 插件 。Textillate.js集成了一些很棒的使用css3动画 效果 的 JavaScript 库,您可非常轻轻松地把这些动画 效果 应该于网页中的任何 文字 。
textillate.js使用
引入核心 文件
<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的动画 效果 。
网站地址 : http://textillate.js.org
GitHub: https://github.com/jschr/textillate
网站描述: 实现动感的 CSS3 文本动画的简单 插件
textillate.js官方网站
官方网站: http://textillate.js.org
如果觉得 网站内容还不错,欢迎将 网站 推荐给程序员好友。