瞭解如何建立分割字母和字詞動畫的基礎總覽。
在這篇文章中，我想分享一些網頁的分割文字動畫和互動問題，對於如何簡化、易於使用且跨瀏覽器運作的解決方式。試試示範。
如果你偏好使用影片，也可以觀看這篇 YouTube 文章：
總覽
分割文字動畫令人驚豔。本文中幾乎不會充滿動畫潛力，但提供了建構基礎的基礎。製作動畫的目標是循序漸進呈現動畫效果。由於動畫是以頂端為基礎，因此文字應預設為清晰可讀。分割文字動態效果可能會變得非常過雜，並可能造成乾擾，因此只有在使用者接受動態時，我們才會調整 HTML 或套用動態樣式。
以下是工作流程和結果的概要說明：
- 針對 CSS 和 JS ，準備縮減動態條件變數。
- 準備在 JavaScript 中使用分割文字公用程式。
- 在網頁載入時調度條件和公用程式。
- 使用字母和字詞 (雷得部分) 撰寫 CSS 轉場效果和動畫。
以下是我們將產生的條件式結果預覽畫面：
如果使用者偏好較慢的動態效果，我們只保留 HTML 文件，不添加動畫。如果動作安全，我們會直接切入片段。以下是 JavaScript 按字母分割文字後的 HTML 預覽畫面。
正在準備動作條件式
這項專案中的 CSS 和 JavaScript 將會使用方便可用的 @media
(prefers-reduced-motion: reduce) 媒體查詢。這項媒體查詢是我們決定分割文字時的主要條件式。CSS 媒體查詢會用來保留轉換和動畫，而 JavaScript 媒體查詢則會用於保留 HTML 操作。
準備 CSS 條件式
我使用 PostCSS 來啟用「Media 查詢 Level 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 啟用 Nesting Draft 1 的 @nest 語法，藉此查看相同的值。這樣就能將動畫的所有邏輯，以及父項和子項的樣式要求儲存在單一位置：
letter-animation {
@media (--motionOK) {
/* animation styles */
}
}
只要使用 PostCSS 自訂屬性和 JavaScript 布林值，即可有條件升級效果。這帶我們進入下一節，也就是我詳細討論 JavaScript 以將字串轉換為元素。
正在分割文字
文字字母、字詞、行等不能使用 CSS 或 JS 個別製作動畫。 為了達到這個效果，我們需要裝上盒。如果想為每個字母加上動畫效果 每個字母都必須是元素此外，如果想為每個字詞建立動畫 每個字詞都必須是元素
- 建立 JavaScript 公用程式函式，將字串分割成元素
- 自動化調度管理這些公用程式的用法
分割字母公用程式函式
一個有趣的起始位置是函式，這個函式會接收字串並傳回陣列中的每個字母。
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() 函式。
分割自動化調度管理
已可使用分割公用程式後，請將所有工具彙整在一起，以便：
- 尋找要分割的元素
- 分割這些內容並以 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 能以下列英文判讀：
- 匯入一些輔助公用程式函式。
- 如果不採取任何行動，檢查能否對此使用者執行動作。
- 針對要分割的每個元素建立範本。
- 根據想要的分割方式進行分割。
- 將文字替換成元素。
分割動畫和轉場效果
上述分割文件操縱方式剛剛成功運用 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 把 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;
}
}
結語
現在你知道我怎麼做，你會怎麼做？🙂
讓我們帶您更多元的方法，並瞭解運用網路打造網站的所有方式。 建立 Codepen 或代管自己的示範影片，透過 Twitter 推文附上，我會將程式碼加到下方的「社群重混」部分。
來源
更多示範和靈感
社群重混作品
<text-hover>由 gnehcwu 於 CodeSandbox 提供的網路元件