在greensock splittext动画中包含标记元素--javascript

时间:2017-10-02 12:31:28

标签: javascript arrays greensock

在Greensocks SplitText中,您可以按words, chars or lines拆分文本。 它尊重传递给它的文本中的标记。

在我的用例中,我将文本分割为words and chars,然后我通过每个角色动画来为其设置动画。

以下是我正在使用的示例。

文字

<div class="intro">
    Lorem dolor sit<br>
    <span class="icon-pin"></span> consectetur<br>
    adiposcing elit, sed do <span class="icon-hand"></span> lorem<br>
    ipsum dolor sit amet.
</div>

JS

var text = $('.intro');
    textTimeline = new TimelineMax;
    textSplitText = new SplitText(text, {
       type: "words,chars"
    });

textTimeline.staggerTo(textSplitText.chars, 1, {
    autoAlpha: 1,
    y: 0,
    delay: .3,
    ease: Power3.easeOut
}, .2);

我希望将一些标记包含在textSplitText.chars数组中,以便它也可以设置动画。

将具有特定类的每个span或元素添加到textSplitText.chars数组的最佳方法是将索引放在正确的位置。

我确实考虑过查看文本并将每个字符计数到我需要添加的元素,并使用该计数来标记数组中添加元素的位置。 但不确定这是最有效的方式。

任何建议都将不胜感激。

0 个答案:

没有答案