关于如何构建拆分字母和文字动画的基本概览。
在这篇博文中,我想与大家分享解决拆分文本动画的思路, 尽可能减少、可访问并且可跨浏览器进行的网络互动。 试用演示版。
如果你更喜欢视频,可以参阅此博文的 YouTube 版本:
概览
拆分文本动画效果非常棒。我们只是触及了 但这确实为构建和扩展动画奠定了基础 。目标是以渐进方式呈现动画效果。这些文字应 其动画效果基于其构建拆分文本的动作效果 会显得过于奢华并且可能会造成破坏,因此我们只会操纵 HTML,或 如果用户可以接受动画,请应用动画样式。
下面概要介绍了工作流程和结果:
- 准备减少动作条件 用于 CSS 和 JS 的变量
- Prepare 拆分文本实用程序: JavaScript。
- 编排页面上的条件和实用程序 加载。
- 编写 CSS 过渡和动画 代表字母和单词(Rad 部分!)。
下面是我们将要获取的条件结果的预览:
![Chrome 开发者工具的屏幕截图,其中“元素”面板已打开,“减少动态”设置为“减少”h1 显示为未拆分的](https://web.developers.google.cn/static/articles/building/split-text-animations/image/screenshot-the-chrome-de-65fd5b490f405.png?authuser=0000&hl=sr)
如果用户更喜欢减少动作,我们就不考虑 HTML 文档, 动画。如果可以,我们直接把它切成片状。这里有 在 JavaScript 按字母拆分文本后预览 HTML。
![Chrome 开发者工具的屏幕截图,其中“元素”面板已打开,“减少动态”设置为“减少”h1 显示为未拆分的](https://web.developers.google.cn/static/articles/building/split-text-animations/image/screenshot-the-chrome-de-fd950f1664ff6.png?authuser=0000&hl=sr)
正在准备动作条件
将在 CSS 中使用方便的 @media
(prefers-reduced-motion: reduce)
媒体查询,
此项目中的 JavaScript。此媒体查询是我们
决定是否拆分文本。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 从 启用 @nest
语法,
嵌套草稿 1。这样,我便可以
存储有关动画的所有逻辑及其样式要求
父级和子级
letter-animation {
@media (--motionOK) {
/* animation styles */
}
}
有了 PostCSS 自定义属性和 JavaScript 布尔值,我们就可以 有条件地升级效应。接下来我们将进入下一部分 分解用于将字符串转换为元素的 JavaScript。
拆分文本
无法使用 CSS 或 JS 为文字、文字、行等分别添加动画效果。 为了实现这个效果,我们需要箱子。如果我们想为每个字母添加动画效果,那么 每个字母都需要是一个元素。如果我们想为每个单词添加动画效果, 单词需要是一个元素。
- 创建用于将字符串拆分为元素的 JavaScript 实用函数
- 编排这些实用程序的使用
拆分字母实用函数
最有趣的示例是先调用一个函数,该函数接受一个字符串, 数组中的字母。
export const byLetter = text =>
[...text].map(span)
通过 分散 语法对这一快速任务有很大帮助。
拆分词实用函数
与拆分字母类似,此函数接受一个字符串并返回每个单词 放在数组中。
export const byWord = text =>
text.split(' ').map(span)
通过
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()
函数。
拆分编排
拆分实用程序可供使用后,将这一切整合在一起意味着:
- 查找要拆分的元素
- 拆分文本并使用 HTML 替换文本
然后,CSS 会接管工作,并为元素 / 方框添加动画效果。
查找元素
我选择使用属性和值来存储
以及拆分文本的方法。我喜欢将这些声明式选项
嵌入到 HTML 中。JavaScript 中的属性 split-by
用于查找
元素,并为字母或字词创建方框。属性
在 CSS 中使用 letter-animation
或 word-animation
来定位元素
子项以及 apply 转换和动画。
以下 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;
}
空格样式很重要,以使这些 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;
}
<ph type="x-smartling-placeholder">过渡拆分字词示例
在这个过渡示例中,我将再次使用悬停操作。由于该效果最初会隐藏 确保仅应用互动和样式 。
@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 或托管自己的演示,将它发到 Twitter 微博中,然后我会将其添加到 下方的“社区混剪作品”部分。
来源
更多演示和灵感
社区混剪作品
- CodeSandbox 上由 gnehcwu 提供的
<text-hover>
网络组件