构建拆分文本动画

简要介绍了如何构建分屏字母和字词动画的基础知识。

Adam Argyle

在本文中，我想与大家分享一些想法，探讨如何解决 Web 的拆分文本动画和互动问题，这些场景应尽可能精简、易于访问且能跨浏览器工作。试用演示版。

演示

如果你更喜欢视频，可以参阅此博文的 YouTube 版本：

概览

拆分文本的动画效果非常棒。本文仅介绍了动画的冰山一角，但它确实提供了一个可供构建的基础。目标是逐步呈现动画效果。文本应默认可读，动画则在其上方构建。分屏文本动画效果可能会过于夸张，并且可能会造成干扰，因此我们只会操控 HTML，或者在用户接受动画效果的情况下应用动画样式。

以下是工作流程和结果的概览：

  1. 为 CSS 和 JS 准备减少动画的条件变量。
  2. 在 JavaScript 中准备分屏文本实用程序。
  3. 在网页加载时编排条件和实用程序。
  4. 为字母和字词编写 CSS 转换和动画（最酷的部分！）。

以下是预期得到的条件结果的预览：

Chrome 开发者工具的屏幕截图，其中“元素”面板处于打开状态，减少的动作设置为“减少”，并且 h1 显示为未分屏
用户更喜欢减少动态：文字清晰可辨 / 未拆分

如果用户更喜欢减少动作，我们会保留 HTML 文档，不执行任何动画。如果动作正常，我们会继续将其剪辑成片段。以下是 JavaScript 按字母拆分文本后的 HTML 预览。

Chrome 开发者工具的屏幕截图，其中“元素”面板处于打开状态，减少的动作设置为“减少”，并且 h1 显示为未分屏
用户接受动画；文本拆分为多个 <span> 元素

准备动作条件

此项目中将使用方便的可用 @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 为文本字母、字词、行等单独添加动画效果。为了实现此效果，我们需要使用框。如果我们想为每个字母添加动画效果，则每个字母都需要是元素。如果我们要为每个字词添加动画效果，那么每个字词都需要是一个元素。

  1. 创建用于将字符串拆分为元素的 JavaScript 实用函数
  2. 协调这些实用程序的使用

拆分字母实用函数

您可以先从某个函数开始，该函数接受一个字符串并以数组中的每个字母返回。

export const byLetter = text =>
  [...text].map(span)

ES6 中的 spread 语法确实有助于快速完成此任务。

拆分词实用函数

与拆分字母类似，此函数接受一个字符串并以数组形式返回每个单词。

export const byWord = text =>
  text.split(' ').map(span)

通过 JavaScript 字符串上的 split() 方法，我们可以指定要从哪个字符开始切片。我传递了一个空格，表示字词之间存在拆分。

创建 boxes 实用函数

该效果需要为每个字母提供一个框，我们在这些函数中看到，系统使用 span() 函数调用了 map()。以下是 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() 函数。

拆分编排

分屏实用程序已准备就绪，将所有内容整合起来意味着：

  1. 查找要拆分哪些元素
  2. 拆分它们并将文本替换为 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 可以以以下英语读取：

  1. 导入一些辅助实用程序函数。
  2. 检查此用户是否可以使用动作感知功能，如果不可以，则不执行任何操作。
  3. 对于要拆分的每个元素。
    1. 按照他们想要的分屏方式进行分屏。
    2. 将文本替换为元素。

拆分动画和过渡

上述文档分屏操作刚刚解锁了许多可能的 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;
}
Flexbox 开发者工具，显示了字词之间的间距

转换分屏字词示例

在此过渡示例中，我再次使用悬停效果。由于此效果在用户悬停之前会隐藏内容，因此我确保只有在设备具有悬停功能时才会应用互动和样式。

@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 或托管自己的演示，然后在推特上向我发送，我会将其添加到下方的“社区混剪作品”部分。

来源

更多演示和灵感

社区混剪作品