建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JS动画库GSAP 字符串处理插件SplitText.js

来源:浏览量:16收藏

简介

SplitText.min.js是动画库GSAP提供的一款插件,但是它可以独立使用。SplitText.min.js会将一段字符串不管是字母还是中文,会按照需求分割并用div包裹着。

(下载的附件中附有DEMO)


使用

1.  引入文件


<script src='//cdnjs.cloudflare.com/ajax/libs/gsap/1.9.2/TweenMax.min.js'></script>
<script type="text/javascript" src="/libs/gsap/utils/split.js"></script>


2.  HTML

<div id="demo">
  <div id="quote" class="skew">
    SplitText makes it easy to break apart the text in an HTML element so that each character, word, and/or line is wrapped in its own div tag.
  </div>
</div>
<div id="nav">
  <button id="restart">Vanish</button>
</div>

// CSS 
body {margin: 0;}
p {margin: 0;}
#demo {
  text-align: center;
  background: #aab;
  padding: 50px;
  font-style: italic;
  font-weight: bold;
  font-family: helvetica;
  font-size: 50px;
  color: #fff;
}
.skew {
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -ie-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
}


3.  调用


var $quote = $('#quote'),
  mySplitText = new SplitText($quote, {
    type: 'words'
  }),
  splitTextTimeline = new TimelineLite();
  TweenLite.set($quote, {perspective: 400});
  function kill() {
    splitTextTimeline.clear().time(0);
    mySplitText.revert();
  }
  
$(document).ready(function() {
  kill();
  mySplitText.split({type: 'lines'});
  $(mySplitText.lines).each(function(index, el) {
    if (index % 2 == 0) {
      splitTextTimeline.from($(el), 1, {
        opacity: 0,
        left: '100px'
      }, index * 0.06);
    } else {
      splitTextTimeline.from($(el), 1, {
        opacity: 0,
        right: '100px'
      }, index * 0.06);
    }
    splitTextTimeline.from($(el), 1, {
      scale: index % 2 == 0 ? 0 : 2,
      ease: Back.easeOut
    }, index * 0.06);
  });
});

$('#restart').click(function() {
  kill();
  mySplitText.split({type: 'lines'});
  $(mySplitText.lines).each(function(index, el) {
    if (index % 2 == 0) {
      splitTextTimeline.to($(el), 1, {
        opacity: 0,
        right: '100px'
      }, index * 0.06);
    } else {
      splitTextTimeline.to($(el), 1, {
        opacity: 0,
        left: '100px'
      }, index * 0.06);
    }
  });
});


相关链接

GitHub 地址 :https://github.com/HuMonkey/SplitText

在线演示 :https://wow.techbrood.com/fiddle/3954