构建拆分文本动画

关于如何构建拆分字母和字词动画的基础知识概览。

Adam Argyle

在本文中，我想分享一些关于如何解决网页拆分文本动画和互动问题的思考，这些动画和互动应尽可能简单、易于访问且可在各种浏览器中运行。 试用演示版。

演示

如果您更喜欢视频，可以观看此博文的 YouTube 版本：

概览

拆分文本动画效果可能非常惊艳。在这篇博文中，我们只是浅尝辄止地介绍了动画的潜力，但它确实提供了一个基础。目标是逐步添加动画。默认情况下，文字应清晰可读，动画效果应在此基础上构建。拆分文本动效可能会变得夸张，并可能造成干扰，因此我们只会操作 HTML，或者在用户可以接受动效的情况下应用动效样式。

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

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

以下是我们要实现的条件结果预览：

Chrome 开发者工具的屏幕截图，其中“元素”面板已打开，减弱动态效果设置为“减弱”，h1 显示为未拆分
用户偏好减少动画：文本清晰易读/未拆分

如果用户偏好减少动画，我们会让 HTML 文档保持原样，不执行任何动画。如果运动正常，我们会继续将其切成碎片。以下是 JavaScript 按字母拆分文本后的 HTML 预览。

Chrome 开发者工具的屏幕截图，其中“元素”面板已打开，减弱动态效果设置为“减弱”，h1 显示为未拆分
用户可以接受动画；文本拆分为多个 <span> 元素

正在准备运动条件

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

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

拆分字母实用函数

一个有趣的起点是编写一个函数，该函数接受一个字符串，并以数组形式返回每个字母。

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

ES6 中的展开语法确实有助于快速完成该任务。

拆分字词实用函数

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

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

JavaScript 字符串上的 split() 方法允许我们指定要在哪些字符处进行切片。 我传入了一个空格，表示字词之间的分隔。

制作盒子实用函数

该效果需要为每个字母提供方框，我们在这些函数中看到，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() 函数。

拆分编排

准备好拆分实用程序后，将所有内容整合在一起意味着：

  1. 确定要拆分的元素
  2. 拆分它们，并用 HTML 替换文本

之后，CSS 接管并为元素/框添加动画效果。

正在查找元素

我选择使用属性和值来存储有关所需动画以及如何拆分文本的信息。我喜欢将这些声明式选项放入 HTML 中。JavaScript 会使用 split-by 属性来查找元素，并为字母或字词创建框。CSS 中使用 letter-animation 或 word-animation 属性来定位元素子级并应用转换和动画。

以下 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 提供一个 display 属性，以及一个用于处理空格的样式：

[letter-animation] > span {
  display: inline-block;
  white-space: break-spaces;
}

空白字符样式非常重要，这样布局引擎就不会收起仅包含一个空格的 span。现在，我们来了解一下有状态的有趣内容。

过渡拆分字母示例

此示例使用 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 或托管您自己的演示，通过推文发送给我，我会将其添加到下面的“社区混剪”部分。

来源

更多演示和灵感

社区混剪