textillate.js 是一款效果炫酷的 jQuery 和 css3 文字动画特效库插件。它通过结合其它一些动画库来制作各种 CSS3 文字动画特效。
<h1 class="tlt">My Title</h1>
在页面的头部引入 jQuery 和 jquery.textillate.js 文件。
<script src="http://libs.useso.com/js/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.textillate.js"></script>
然后就可以如下调用插件。
$(function () {
$('.tlt').textillate();
})
上面的方法将会使用默认参数来调用插件。要改变默认参数,你可以使用 data-属性来设置新参数。
<pre lang="php" line="1" escaped="true" ><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();
你可以使用 data-属性来控制么一个列表项上的文本的动画效果。
演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务,详询在线客服!