当前位置:主页 > JavsScript库 > 动画 >

花式分割文本动画与GSAP库 – splitterText
栏目分类:动画   发布日期:2021-09-03   浏览次数:

splitterText 是一个小型 JavaScript 库,用于使用gsap JavaScript 动画库创建可自定义的拆分文本动画。

使用:

1. 在文档中加载 GSAP 和 splitterText.js 库。

<script src="/path/to/cdn/gsap.min.js"></script> 
<script src="/path/to/cdn/splitterText.js"></script>

2. 为您的文本分配一个唯一的 ID。

<h1 id="title">HTML369.cn</h1>

3. 对文本应用分割动画。

  • id: 文本元素的选择器

  • containerclass: 容器类

  • class: 文本元素的CSS类

  • escape: 用于 <br> 的字符

  • from:GSAP 动画对象

  • to:GSAP 动画对象

splitterText(   
  { 
  id: "title", 
  containerclass: "mask", 
  class: "splitterLetter", 
  escape: " ", 
  from: { 
    x: "-110%", 
    stagger: { 
      from: "left", 
      amount: 0.5, 
    }, 
  }, 
  to: { 
    duration: 1, 
    x: "0px", 
    stagger: { 
      from: "left", 
      amount: 0.5, 
    }, 
  }, 
});



官方网站:https://github.com/LorenzoDoremi/splitterText

相关热词: splitterText文本动画

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库