文本/链接

Textillate-jQuery和css3文字动画特效库

阿里云

textillate.js 是一款效果炫酷的 jQuery 和 css3 文字动画特效库插件。它通过结合其它一些动画库来制作各种 CSS3 文字动画特效。

html 结构:

  1. <h1 class="tlt">My Title</h1>
也想出现在这里?联系我们
创客主机

在页面的头部引入 jQuery 和 jquery.textillate.js 文件。

  1. <script src="http://libs.useso.com/js/jquery/1.9.1/jquery.min.js"></script>
  2. <script src="jquery.textillate.js"></script>

然后就可以如下调用插件。

  1. $(function () {
  2.     $('.tlt').textillate();
  3. })

上面的方法将会使用默认参数来调用插件。要改变默认参数,你可以使用 data-属性来设置新参数。

  1. <pre lang="php" line="1" escaped="true" ><h1 class="tlt" data-in-effect="rollIn">Title</h1>

或者在初始化插件时设置参数:

  1. $('.tlt').textillate({ in: { effect: 'rollIn' } });

你可以通过下面的方式来使 textillate.js 动画整个列表内容。

  1. <h1 class="tlt">
  2.     <ul class="texts">
  3.         <li data-out-effect="fadeOut" data-out-shuffle="true">Some Title</li>   
  4.         <li data-in-effect="fadeIn">Another Title</li>
  5.     </ul>
  6. </h1>
  1. $('.tlt').textillate();

你可以使用 data-属性来控制么一个列表项上的文本的动画效果。

Textillate-jQuery 和 css3 文字动画特效库

已有 446 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!