使用這些令人眼花繚亂的效果讓您的文本動起來

如今，讓一切都動起來的趨勢佔據了主導地位。 您不禁會追隨這種瘋狂，並痴迷於將生命注入網站的每個細節。 靜態時代已經過去。 一切都是動態的。 你知道嗎？ 用戶完全清楚這一點。

對於某些人來說，這是個壞消息，因為要讓用戶相信靜態網站會帶來令人興奮的體驗，需要付出巨大的努力。 對於其他人來說，這是一個炫耀、展示你內在天賦並被捲入充滿活力的瘋狂世界的機會。

如果您仍然堅持認為您可以對排版做的唯一事情就是使用另類的字體或奢華的懸停效果，那麼我們將證明您錯了。 你可以用排版創造奇蹟，把它變成一種在創造印象方面不會屈服於別人的東西。

如果您不喜歡沉浸式或繁重的解決方案，那麼這確實是一條出路。 為了給您一個堅實的開始，我們收集了幾個令人難以置信的代碼片段，其中刻字被巧妙地設置在運動中，帶來了出色的結果。

Arsen Zbidniakov 的破碎文本動畫

看看 Arsen Zbidniakov 的 Shattering Text Animation。 不是很精彩嗎？ 該解決方案既不會用大量動作和不必要的動態使訪問者不知所措，也不會使您的系統過載。 它只是有效，讓每個人都處於“哇”的狀態。

在 GSAP 工具和 SVG 路徑的幫助下，這種組合和分解文本的破碎效果簡直令人難以置信。 更重要的是，將鼠標光標懸停在它上面，您將有機會控製過程的速度，減慢一切。 這真是太棒了。

Szenia Zadvornykh 的文本動畫

與我們的第一個示例非常相似，此代碼片段展示了組裝和反彙編文本的動畫。 然而，這次藝術家使用 Three.js 讓一切變得栩栩如生。 這是另一個可控的爆炸。 是的，你沒看錯：你也可以通過點擊和拖動來控制動畫的速度。 如果你喜歡這個實驗，Szenia 有一些更有趣的例子。 只需查看他的個人資料即可。

Ara 的動態圖形字體和另一個實驗

Ara 有幾個令人興奮的排版實驗。 以下兩個示例都是抽象的，基於幾何操作以及高科技的感覺和外觀。 在某些方面，它們甚至有點奇怪。

在第一個示例中，文本由微小的片段組成，這些片段緩慢但肯定地形成了 3D 粒子隧道。

在第二種情況下，每個符號都是由原始多邊形構成的，例如運動的三角形、正方形和矩形。 感覺就像某人的數字手正在將它們編織在一起。

Nate Wiley 的 GSAP 文本動畫

Nate Wiley 將拆分文本從 Greensock 變成了他的優勢，重新創建了一個了不起的文本動畫。 他把一段普通的文字吹成小片段，每個片段都是一個符號。 爆炸後，人物向各個方向移動，平穩地消失。

CSS Motion Typography: Exploding Text by Dudley Storey

與前面的例子不同，高端技術支持解決方案的美感，這里基於 CSS 的動作運行了節目。 Dudley Storey 運用了 CSS 關鍵幀動畫、過渡、JavaScript、SVG 和一點 Adob​​e Illustrator 魔法。 這個詞破碎了一點，然後分裂成多邊形的碎片，你仍然可以閱讀它。 如果您想為您的排版添加時尚的粗暴，這種效果肯定是一個起點。

池田康信使用 Three.js 製作的許多 3D 圖標

Nate Wiley 將文本吹走，而池田康信則相反，迫使散佈在整個屏幕上的粒子形成文本。 這裡的粒子只不過是微小的圖標。 作者使用 Three.js 重現了這個華麗的 3D 動畫。

Tamino Martinius 的 SVG 路徑動畫文本

Tamino Martinius 通過使用 SVG 路徑從更傳統的操作中受益。 由於流暢的形狀、超細的線條和液體般的行為，動畫散發著優雅和精緻的氣息。 儘管它不像我們的第一個示例那樣令人興奮，但它的強大之處在於能夠適應眾多項目，因為它肯定是一個實用的解決方案。

更實用的用法

說到這，我們還包括了一些鼓舞人心且實用的解決方案。 在這裡，類型被設置為運動，以便您可以朝這個方向邁出小步。

雖然前兩個示例具有對標語和朗朗上口的短語有益的效果，但後者對於常規文本塊來說是一個有趣的解決方案。

思考——Mikael Ainalem 創建循環

Mikael Ainalem 的筆顯示了一個循環動畫，其中單詞在旋轉中突出顯示。 這是引導用戶從一個詞到另一個詞的絕佳方式。

由 Tryggvi Gylfason 壓制

Tryggvi Gylfason 添加了一條從左到右滑動的移動線，並迫使字母跟隨它，從而按下或拉動一個單詞的符號。 效果很小但很吸引人。

Ignacio Correia 使用 TweenMax 進行文本滾動運動模糊

Ignacio Correia 提供具有運動模糊效果的文本。 當您以輕快的速度向下移動時，文本會模糊成一個幾乎是白色的點。 當你放慢速度時，這些詞變得不那麼晦澀難懂。

在排版中使用動畫的一個案例

這些印刷動畫迫使我們停下來享受動作。 它們與可以在其他元素（例如英雄區域）中看到的動畫一樣鼓舞人心和引人注目。

不幸的是，我們在野外看不到很多。 似乎每個人都痴迷於使用動感十足的全屏動畫，而不是讓簡單的字體動起來。 但正如我們在這裡看到的那樣，這些影響可以對用戶產生同樣大的影響。