splitText()
一个轻量级、响应式且易于访问的文本工具函数，用于分割、克隆和包装 HTML 元素的行、单词和字符。
文本分割是使用 splitText() 函数创建的。
import { splitText } from 'animejs';
const split = splitText(target, parameters);自 v4.2.0 起，splitText() 方法也可以独立导入，无需导入整个库。
import { splitText } from 'animejs/text';参数
| 名称 | 接受 |
|---|---|
| 目标 | 一个有效的 CSS 选择器 String | HTMLElement |
| 参数 (可选) | 一个 TextSplitter 设置 Object |
返回
TextSplitter
splitText() 代码示例
import { createTimeline, stagger, utils, splitText } from 'animejs';
const { words, chars } = splitText('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;
}
本节内容