Textillate.js 动感十足的 CSS3 文本动画插件 - 文章教程

Textillate.js 动感十足的 CSS3 文本动画插件

发布于 2018-03-25 字数 4522 浏览 2439 评论 0

Textillate.js是一个动感十足的CSS3文本动画插件,集成了一些非常好的 JavaScript 库,提供一个方便使用的文本动画效果,可以让你为网页中的文字运用各种动画,它整合了两个流行的工具库 animate.css 和 lettering.js 来提供易于使用的插件,能够把 CSS3 动画应用到文本内容上。

只要引入 textillate.js 和它依赖的文件就能够给你的内容加上独一无二的特效。

使用方法

加载所需必要的JS和CSS文件。

<link href="assets/animate.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="assets/jquery.lettering.js"></script>
<script src="jquery.textillate.js"></script>

编写HTML代码

<h1 class="tlt">My Title</h1>

编写JavaScript代码

$(function () {
    $('.tlt').textillate();
})

这将使使用默认选项。改变缺省值,您可以使用HTML数据API:

<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();

注意你可以控制每个文本动画参数(<li>)使用数据 API。

配置动画效果

您可以自定义动画的切换效果,使用data属性设置动画的名称即可,以下为可用的动画效果名称。

$('.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
  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
  },

  // out animation settings.
  out: {
    effect: 'hinge',
    delayScale: 1.5,
    delay: 50,
    sync: false,
    shuffle: false,
  }
});

注意:这个插件的动画效果不支持旧版本的浏览器。

插件事件

Textillate triggers the following events:

  • start.tlt – triggered when textillate starts
  • inAnimationBegin.tlt – triggered when the in animation begins
  • inAnimationEnd.tlt – triggered when the in animation ends
  • outAnimationBegin.tlt – triggered when the out animation begins
  • outAnimationEnd.tlt – triggered when the in animation ends
  • end.tlt – triggered when textillate ends
$('.tlt').on('inAnimationBegin.tlt', function () {
  // do something
});

插件方法

  • $element.textillate('start') – Manually start/restart textillate
  • $element.textillate('stop') – Manually pause/stop textillate
  • $element.textillate('in') – Trigger the current text’s in animation
  • $element.textillate('out') – Trigger the current text’s out animation

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0