在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
数组的最佳方法是将索引放在正确的位置。
我确实考虑过查看文本并将每个字符计数到我需要添加的元素,并使用该计数来标记数组中添加元素的位置。 但不确定这是最有效的方式。
任何建议都将不胜感激。