简介

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>
</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