SplitText.js 分解文本为字母元素集合 - 踏得网

break apart the text in an HTML element

《javascript判断点是否在三角形内部》申请公开！

第三方库
作品简介 2208
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

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

编译

CSS

HTML