网页设计中粒子动画的 10 个漂亮例子

几年前，粒子动画席卷了网络，并成功地为自己开辟了一个利基市场。 当前对具有高科技氛围和几何装饰的设计的巨大痴迷使它们成为当今更受欢迎的解决方案之一。

通常，粒子动画可以在英雄部分看到，例如在 JetUp Digital 中。

如您所见，这是一种优雅的方式，可以为第一印象添加某种趣味，同时巧妙地、不显眼地将网站与人群分开。

要重现这种效果，您的第一步应该是particles.js。

它是 Vincent Garreau 的轻量级插件，是大多数粒子动画的核心和灵魂。 更重要的是，在其原始状态下，它是网络上复制最多的解决方案之一——尽管可能不像作者的例子那样具有如此高的强度。

通常，开发人员更喜欢更整洁、谦虚和冷静的变体。 例如，查看 Romswell Roswell Parian Paucar 的 Canvas Particles。 它是粒子和视差的组合，产生了一种引人入胜的动态美感。

然而，这并不意味着该方法仅限于这种实现。 考虑一下 Dean Wagman 的 Particles in space、Robin Selmer 的 CSS only 粒子系统，当然还有 Alex Safayan 的代码笔中巧妙地再现和特色的推开效果。 虽然 Robin Selmer 的概念只是一个令人愉悦的作品； 另外两个需要用户的交互，这总是令人兴奋的。

使用粒子动画给人留下深刻印象

随着时间的推移，技术成熟了。 从散落在画布上的杂乱无章的小白点，它变成了一种潜力巨大的工具。 这不是什么特别的东西，但它有一定的令人惊叹的因素。 此外，它完美地为高科技、几何和商务美学做出了贡献——自然而然地完成了它们。

前提是：粒子动画要给人留下深刻印象。 而且，开发人员始终坚持这一假设，充分利用它。 让我们考虑一下这个解决方案的真正粉丝创建的一些惊人的代码片段。

Justin Windle 的 30,000 个粒子

这里的标题不言自明。 船上有 30,000 个粒子，您会期待一些宏伟的东西。 贾斯汀温德尔当然达到了我们的期望。 他的概念令人难以置信。 用你的鼠标到处玩。 物理学只是例外。 这个版本的粒子动画在开发者中很受欢迎，尽管规模没有那么大。

Alex Safayan 在水中的鱼

Alex Safayan 提出了几乎相同的解决方案，但在这种情况下，粒子越来越大。 鼠标光标也将这些点推开，形成带有微妙涟漪效果的痕迹。 动画的行为让人想起鱼靠近水面时的运动。 注意物理学：点之间的相互作用是经过深思熟虑的。

浮游生物——Marco Dell'Anna 的粒子生命

获得 2017 年度最受关注项目奖的 Plankton 无疑是值得关注的。 该项目不仅着迷于想法，还着迷于实现。 从像手套一样适合这里的微妙色彩到看起来令人难以置信的自然的华丽行为，Marco Dell'Anna 对细节有着敏锐的洞察力。

Marco Dell'Anna的星尘

我喜欢这里华丽的复古氛围、霓虹灯和华丽的色彩。 很难把你的眼睛从它身上移开。 Stardust 是设计和编码的共生体，是一部鼓舞人心的杰作。

Akimitsu Hamamuro 的重力点

Akimitsu Hamamuro 邀请您在他的游乐场添加所谓的“重力点”。 它们侵入点的混乱运动，像磁铁一样拉动它们。 虽然它们不扮演轨道中心的角色； 然而，它们形成了迫使粒子向其方向移动的焦点。

Nate Wiley 的 Particle Orb CSS

如今，球体是英雄区域非常流行的风格选择。 Nate Willey 对这一趋势的看法令人印象深刻。 由于微小的颗粒，球体看起来很脆弱，同时由于经过深思熟虑的行为而坚固。 他分解和重新形成球体的程序非常棒。

Kevin Rajaram 的粒子波

Kevin Rajarm 汲取了粒子动画的美丽和优雅，并用 Three.js 的强大功能对其进行了增强，带来了一个精致但真正复杂的概念。 令人惊叹的海浪景色让人感觉未来主义、人工和迷人。

非正统用途

还有更令人印象深刻的使用粒子动画的方法。 让我们走出常规，开箱即用地思考：这种方法很容易使标识和字母等元素受益。

Tamino Martinius 的交互式粒子标志

Interactive Particle Logo 就是一个典型的例子。 它看起来像是上面提到的 Justin Windle 片段的重新设想的解决方案。 虽然没有 30,000 个点，但它由数量惊人的粒子组成，巧妙地组成了“CODEPEN”这个词。 这是该概念找到实际用途的案例之一。

Louis Hoebregts 的文本到粒子

Louis Hoebregts 在这支笔中提供了先前解决方案的彩色版本。 这里的文本是由一千个彩色实心圆圈组成的，这些圆圈通过与上一个示例相同的交互性来丰富。

粒子由 Marco Dell'Anna 书写文本

虽然这不是一个戏剧性的入口，但它有一些令人着迷的东西。 流畅的动画慢慢揭开人物的面纱，点燃我们的兴趣。 这个概念具有类似于“陌生人事物”介绍的某种神秘风格。

马可·戴尔安娜 (Marco Dell'Anna) 就这样做

这是Marco Dell'Anna的又一杰作。 这一次，粒子动画参与塑造了著名的耐克标志。 从晦涩、半透明到明快、立体，动画逐渐暴露了标志，不显眼地抓住了整体的注意力。

enrico toniato 的 404 粒子文本

如果您认为粒子动画的唯一实际用途是丰富英雄部分，那么 Enrico Toniato 将证明您错了。 他对错误页面的看法非常出色。 遵循他的想法并使用运动中的粒子来拯救 404 页面，使其不再显得无聊和令人反感。

引人注目的效果

粒子动画是越小越好的情况之一。 点越小，可以实现的效果就越令人印象深刻。 一方面，由于涉及几何和物理，它看起来很复杂。 另一方面，由于精致的形状，它看起来脆弱而微妙。 这种独特的融合使粒子动画与众不同且引人注目。