网站地图    收藏   

主页 > 下载 > jquery插件 >

jquery打字机效

来源:未知    时间:2016-05-26 14:21 作者:xxadmin 阅读:

[导读] 插件介绍 textillate是一款效果非常炫酷的jQuery和css3文字动画特效库插件。textillate可以制作出各种CSS3动画的文字特效。它可以使文字旋转、翻转、滑动、淡入淡出,并且可以设置文字的...



blob.png


    插件介绍


    textillate是一款效果非常炫酷的jQuery和css3文字动画特效库插件。textillate可以制作出各种CSS3动画的文字特效。它可以使文字旋转、翻转、滑动、淡入淡出,并且可以设置文字的动画方向和序列。


    浏览器兼容性


    浏览器兼容性

  下载插件   (3)


简要教程

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

如何使用

基本的html结构如下:


<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-属性来设置新参数。

<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-属性来控制么一个列表项上的文本的动画效果。


插件依赖

textillate.js文字动画库插件依赖于下面的一些库文件:

jQuery

lettering.js

animate.css


可用参数


$('.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  设置启动动画前的初始延迟
  // (note that depending on the in effect you may need to manually apply 
  // visibility: hidden to the element before running this plugin)  注意,根据不同的效果,你可能需要手动应用可见性:隐藏的元素在运行这个插件
  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,
    // reverse the character sequence 逆字符序列
    // (note that reverse doesn't make sense with sync = true)
    reverse: false,
    // callback that executes once the animation has finished 一旦动画完成后,执行回调
    callback: function () {}
  },
  // out animation settings.
  out: {
    effect: 'hinge',
    delayScale: 1.5,
    delay: 50,
    sync: false,
    shuffle: false,
    reverse: false,
    callback: function () {}
  },
  // callback that executes once textillate has finished 
  callback: function () {},
  // set the type of token to animate (available types: 'char' and 'word')
  type: 'char'
});

                

事件


Textillate 会触发下面的事件。

start.tlt:当textillate 开始动画时触发。

inAnimationBegin.tlt:当 in 动画开始时触发。

inAnimationEnd.tlt:当 in 动画结束时触发。

outAnimationBegin.tlt:当 out 动画开始时触发。

outAnimationEnd.tlt:当 out 动画结束时触发。

end.tlt:当textillate 结束动画时触发。


方法


$element.textillate('start'):手动开始/重置textillate动画。

$element.textillate('stop'):手动暂停/停止textillate动画。

$element.textillate('in'):触发当前文字的 in 动画。

$element.textillate('out'):触发当前文字的 out 动画。



下载插件

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论