简要介绍了如何构建分屏字母和字词动画的基础知识。
在本文中，我想分享一些关于如何为 Web 解决分屏文本动画和互动问题的方法，这些方法简单易用，适用于各种浏览器。试用演示版。
如果您更喜欢视频，请观看此帖子的 YouTube 版本：
概览
分屏文本动画效果出众。本文仅介绍了动画的冰山一角，但它确实提供了一个可供构建的基础。目标是逐步呈现动画效果。文本应默认可读，动画则在其上方构建。分屏文本动画效果可能会过于夸张，并且可能会造成干扰，因此我们只会操控 HTML，或者在用户接受动画效果的情况下应用动画样式。
以下是工作流程和结果的概览：
以下是预期得到的条件结果的预览：
如果用户更喜欢减少动态，我们将保留 HTML 文档，不播放动画。如果动作正常，我们会继续将其剪辑成片段。下面是 JavaScript 按字母拆分文本后的 HTML 预览。
正在准备动作条件
我们将在此项目中的 CSS 和 JavaScript 中使用方便的 @media
(prefers-reduced-motion: reduce) 媒体查询。此媒体查询是我们决定是否拆分文本的主要条件。CSS 媒体查询将用于暂停过渡和动画，而 JavaScript 媒体查询将用于暂停 HTML 操作。
准备 CSS 条件
我使用 PostCSS 启用了媒体查询第 5 级的语法，这样我就可以将媒体查询布尔值存储到变量中：
@custom-media --motionOK (prefers-reduced-motion: no-preference);
准备 JS 条件
在 JavaScript 中，浏览器提供了一种检查媒体查询的方法，我使用解构从媒体查询检查中提取并重命名布尔值结果：
const {matches:motionOK} = window.matchMedia(
'(prefers-reduced-motion: no-preference)'
)
然后，我可以测试 motionOK，并且仅在用户未请求减少动作时更改文档。
if (motionOK) {
// document split manipulations
}
我可以使用 PostCSS 启用嵌套草稿 1 中的 @nest 语法，以检查相同的值。这样一来，我就可以将与动画相关的所有逻辑以及其对父级和子级的样式要求存储在一个位置：
letter-animation {
@media (--motionOK) {
/* animation styles */
}
}
有了 PostCSS 自定义属性和 JavaScript 布尔值，我们就可以有条件地升级效果了。接下来进入下一部分，我将详细介绍用于将字符串转换为元素的 JavaScript。
拆分文本
您无法使用 CSS 或 JS 为文本字母、字词、行等单独添加动画效果。为了实现此效果，我们需要使用框。如果我们想为每个字母添加动画效果，则每个字母都需要是元素。如果我们想为每个字词添加动画效果，则每个字词都需要是元素。
- 创建用于将字符串拆分为元素的 JavaScript 实用函数
- 编排这些实用程序的使用
拆分字母实用函数
您可以先从某个函数开始，该函数接受一个字符串并以数组中的每个字母返回。
export const byLetter = text =>
[...text].map(span)
ES6 中的 spread 语法确实有助于快速完成此任务。
拆分字词实用函数
与拆分字母类似，此函数接受一个字符串，并返回数组中的每个字词。
export const byWord = text =>
text.split(' ').map(span)
借助 JavaScript 字符串的 split() 方法，我们可以指定按哪些字符进行切片。我传递了一个空格，表示字词之间有分隔符。
创建 boxes 实用函数
该效果需要为每个字母加上方框，我们在这些函数中看到，map() 是使用 span() 函数调用的。以下是 span() 函数。
const span = (text, index) => {
const node = document.createElement('span')
node.textContent = text
node.style.setProperty('--index', index)
return node
}
请务必注意，系统会使用数组位置设置一个名为 --index 的自定义属性。为字母动画添加框非常棒，但在 CSS 中使用索引是一项看似微不足道但影响巨大的改进。其中最值得注意的是延迟。我们将能够使用 --index 来偏移动画，以实现交错效果。
“实用程序”部分结语
完成后的 splitting.js 模块：
const span = (text, index) => {
const node = document.createElement('span')
node.textContent = text
node.style.setProperty('--index', index)
return node
}
export const byLetter = text =>
[...text].map(span)
export const byWord = text =>
text.split(' ').map(span)
接下来，导入并使用这些 byLetter() 和 byWord() 函数。
拆分编排
分屏实用程序已准备就绪，将所有内容整合起来意味着：
- 查找要拆分的元素
- 拆分它们并将文本替换为 HTML
之后，CSS 会接管并为元素/框添加动画效果。
查找元素
我选择使用属性和值来存储有关所需动画的信息以及如何拆分文本。我喜欢将这些声明式选项添加到 HTML 中。属性 split-by 用于从 JavaScript 中查找元素，并为字母或字词创建框。属性 letter-animation 或 word-animation 用于 CSS，用于定位元素子项并应用转换和动画。
以下 HTML 示例展示了这两个属性：
<h1 split-by="letter" letter-animation="breath">animated letters</h1>
<h1 split-by="word" word-animation="trampoline">hover the words</h1>
从 JavaScript 查找元素
我使用 CSS 选择器语法来实现属性存在，以收集希望拆分其文本的元素列表：
const splitTargets = document.querySelectorAll('[split-by]')
从 CSS 中查找元素
我还使用了 CSS 中的属性存在状态选择器，为所有字母动画提供相同的基本样式。稍后，我们将使用该属性值添加更具体的样式以实现效果。
letter-animation {
@media (--motionOK) {
/* animation styles */
}
}
原地拆分文本
对于我们在 JavaScript 中找到的每个分屏目标，我们会根据该属性的值拆分其文本，并将每个字符串映射到一个 <span>。然后，我们可以将元素的文本替换为我们创建的框：
splitTargets.forEach(node => {
const type = node.getAttribute('split-by')
let nodes = null
if (type === 'letter') {
nodes = byLetter(node.innerText)
}
else if (type === 'word') {
nodes = byWord(node.innerText)
}
if (nodes) {
node.firstChild.replaceWith(...nodes)
}
})
编排总结
index.js 在完成时：
import {byLetter, byWord} from './splitting.js'
const {matches:motionOK} = window.matchMedia(
'(prefers-reduced-motion: no-preference)'
)
if (motionOK) {
const splitTargets = document.querySelectorAll('[split-by]')
splitTargets.forEach(node => {
const type = node.getAttribute('split-by')
let nodes = null
if (type === 'letter')
nodes = byLetter(node.innerText)
else if (type === 'word')
nodes = byWord(node.innerText)
if (nodes)
node.firstChild.replaceWith(...nodes)
})
}
该 JavaScript 可以以以下英语读取：
- 导入一些辅助实用函数。
- 检查此用户是否可以使用动作感知功能，如果不可以，则不执行任何操作。
- 对于要拆分的每个元素。
- 按照他们想要的分屏方式进行分屏。
- 将文本替换为元素。
拆分动画和转场效果
上述文档分屏操作刚刚解锁了许多可能的 CSS 或 JavaScript 动画和效果。本文底部提供了一些链接，可帮助您发掘分屏的潜力。
现在，您可以展示自己能用它做些什么了！我将分享 4 个 CSS 驱动的动画和过渡效果。🤓
拆分字母
在实现分屏效果的基础上，我发现以下 CSS 非常有用。我将所有过渡和动画放在动作媒体查询后面，然后为每个新的子字母 span 指定一个显示属性以及用于处理空格的样式：
[letter-animation] > span {
display: inline-block;
white-space: break-spaces;
}
空格样式非常重要，因为只有空格的跨度不会被布局引擎收起。现在，我们来看看有趣的状态相关内容。
转场分屏字母示例
此示例使用 CSS 转场效果来实现分屏文本效果。对于转场效果，我们需要为引擎提供在转场期间的状态，我选择了三种状态：未悬停、在句子中悬停、在字母上悬停。
当用户将鼠标悬停在相应句子（即容器）上时，我会缩小所有子项，就像用户将其推得更远一样。然后，当用户将鼠标悬停在某个字母上时 我就会将该字母向前移动
@media (--motionOK) {
[letter-animation="hover"] {
&:hover > span {
transform: scale(.75);
}
& > span {
transition: transform .3s ease;
cursor: pointer;
&:hover {
transform: scale(1.25);
}
}
}
}
动画拆分字母示例
此示例使用预定义的 @keyframe 动画为每个字母无限循环播放动画，并利用内嵌自定义属性索引来创建交错效果。
@media (--motionOK) {
[letter-animation="breath"] > span {
animation:
breath 1200ms ease
calc(var(--index) * 100 * 1ms)
infinite alternate;
}
}
@keyframes breath {
from {
animation-timing-function: ease-out;
}
to {
transform: translateY(-5px) scale(1.25);
text-shadow: 0 0 25px var(--glow-color);
animation-timing-function: ease-in-out;
}
}
拆分字词
在这些示例中，Flexbox 用作容器类型，很好地利用了 ch 单位作为合理的间距长度。
word-animation {
display: inline-flex;
flex-wrap: wrap;
gap: 1ch;
}
转换分屏字词示例
在此过渡示例中，我再次使用悬停效果。由于此效果在用户悬停之前会隐藏内容，因此我确保只有在设备具有悬停功能时才会应用互动和样式。
@media (hover) {
[word-animation="hover"] {
overflow: hidden;
overflow: clip;
& > span {
transition: transform .3s ease;
cursor: pointer;
&:not(:hover) {
transform: translateY(50%);
}
}
}
}
为拆分字词添加动画效果的示例
在此动画示例中，我再次使用 CSS @keyframes 在常规的段落文本上创建了一段交错的无限动画。
[word-animation="trampoline"] > span {
display: inline-block;
transform: translateY(100%);
animation:
trampoline 3s ease
calc(var(--index) * 150 * 1ms)
infinite alternate;
}
@keyframes trampoline {
0% {
transform: translateY(100%);
animation-timing-function: ease-out;
}
50% {
transform: translateY(0);
animation-timing-function: ease-in;
}
}
总结
现在您已经知道我是如何做到的，您会怎么做呢？🙂
让我们多元化我们的方法，了解在 Web 上构建的所有方式。 创建一个 Codepen 或托管自己的演示，然后在推特上向我发送，我会将其添加到下方的“社区混剪作品”部分。
来源
更多演示和灵感
社区混剪作品
- CodeSandbox 上 gnehcwu 创建的
<text-hover>Web 组件