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

发布于 2018-03-25 10:42:50 字数 4199 浏览 2734 评论 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

相关链接

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

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

列表为空,暂无数据

关于作者

JSmiles

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

0 文章
0 评论
84935 人气
更多

推荐作者

遥远的她

文章 0 评论 0

情深如许

文章 0 评论 0

18120987591

文章 0 评论 0

女皇必胜

文章 0 评论 0

13002228876

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。