split()
一个轻量级、响应式且可访问的文本工具函数，用于拆分、克隆和包裹 HTML 元素的行、单词和字符。
分割通过使用 text.split() 函数创建。
import { text } from 'animejs';
const split = text.spit(target, parameters);参数
| 名称 | 接受 |
|---|---|
| 目标 | 一个有效的 CSS 选择器 String | HTMLElement |
| 参数 (可选) | 一个包含 TextSplitter 设置的 Object |
返回
TextSplitter
split() 代码示例
import { createTimeline, stagger, utils, text } from 'animejs';
const { words, chars } = text.split('p', {
words: { wrap: 'clip' },
chars: true,
});
createTimeline({
loop: true,
defaults: { ease: 'inOut(3)', duration: 650 }
})
.add(words, {
y: [$el => +$el.dataset.line % 2 ? '100%' : '-100%', '0%'],
}, stagger(125))
.add(chars, {
y: $el => +$el.dataset.line % 2 ? '100%' : '-100%',
}, stagger(10, { from: 'random' }))
.init();<div class="large centered grid square-grid">
<p class="text-xl">
All-in-one text splitter<br>
テキストスプリッター
</p>
</div>#text-split .text-xl {
font-size: 1.5rem;
color: currentColor;
letter-spacing: 0.06em;
line-height: 1.35;
}
本节内容