使用这些令人眼花缭乱的效果让您的文本动起来

如今，让一切都动起来的趋势占据了主导地位。 您不禁会追随这种疯狂，并痴迷于将生命注入网站的每个细节。 静态时代已经过去。 一切都是动态的。 你知道吗？ 用户完全清楚这一点。

对于某些人来说，这是个坏消息，因为要让用户相信静态网站会带来令人兴奋的体验，需要付出巨大的努力。 对于其他人来说，这是一个炫耀、展示你内在天赋并被卷入充满活力的疯狂世界的机会。

如果您仍然坚持认为您可以对排版做的唯一事情就是使用另类的字体或奢华的悬停效果，那么我们将证明您错了。 你可以用排版创造奇迹，把它变成一种在创造印象方面不会屈服于别人的东西。

如果您不喜欢沉浸式或繁重的解决方案，那么这确实是一条出路。 为了给您一个坚实的开始，我们收集了几个令人难以置信的代码片段，其中刻字被巧妙地设置在运动中，带来了出色的结果。

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 提供具有运动模糊效果的文本。 当您以轻快的速度向下移动时，文本会模糊成一个几乎是白色的点。 当你放慢速度时，这些词变得不那么晦涩难懂。

在排版中使用动画的一个案例

这些印刷动画迫使我们停下来享受动作。 它们与可以在其他元素（例如英雄区域）中看到的动画一样鼓舞人心和引人注目。

不幸的是，我们在野外看不到很多。 似乎每个人都痴迷于使用动感十足的全屏动画，而不是让简单的字体动起来。 但正如我们在这里看到的那样，这些影响可以对用户产生同样大的影响。