textillate.js

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

小编说

以上是编程之家为你收集整理的textillate.js全部内容。

如果觉得编程之家网站内容还不错，欢迎将编程之家推荐给好友。