8 个展示网页设计中排斥效果的片段

已发表: 2020-10-07

这些天来，帆布实验是镇上的话题。它们不仅可以被视为流行的 Web 开发人员游乐场中的概念，还可以被视为现实项目的解决方案。多样性无疑是惊人的：从基于流行插件的原始粒子动画到融合了现代和久经考验的工具的独一无二的想法。

今天，我们提请您注意排斥效应。尽管它具有令人厌恶的行为，但它肯定具有吸引人的性质。通过向各个方向推动它们来鼓励用户玩风景的细节，或者在某些情况下甚至将所有东西都吹走，它立即成为主要的娱乐方式。它使用户体验愉快和令人兴奋。

让我们通过代码片段探索一系列鼓舞人心的演示，以便您自己了解独特的趋势。

排斥线

乍一看，这个演示让人想起一组吉他弦。将光标移到它们上，您将看到魔法。线条开始弯曲变形，形成一个小球体。

右侧的选项面板允许您控制效果。您可以设置鼠标范围的半径，添加或减少行数，或更改字符串之间的距离。注意物理。它经过深思熟虑并精心复制。

参见 Daniel Velasquez 的钢笔排斥线

当应用于数千个点而不是线时，排斥效果看起来简直太棒了。 Justin Windle 在实践中证明了这一点。他在 CodePen 上的标志性和广受欢迎的项目有一个面板，可以舒适地放置 30,000 个微小颗粒。

它们紧紧地挤在一起，形成一个致密的表面。将鼠标光标悬停在它上面，您将看到这些点是如何远离您的。尽管它们不会从视图中消失，但它们会受到鼠标范围的限制。因此，您可以看到一个相对较大的空心圆圈，其中的点构成了边界。

查看 Justin Windle 的 Pen 30,000 Particles

如果简单的矩形框架不能激发您的创造力，您总是可以像 Tamino Martinius 在他的 Interactive Particles 项目中所做的那样将所有这些点聚集成字符。

他的演示包括一个单词，其中每个字母由数百个点构成。用鼠标将它们吹走以增加趣味。有一个小型控制中心，您可以在其中更改实验参数并根据您的喜好进行调整。

请参阅 Tamino Martinius 的 Pen Interactive Particle 徽标

让我们使用颜色和大小来丰富前面的两个概念，就像 Louis Hoebregts 在他的 Text to Particles 项目中所做的那样。

与 Tamino Martinius 的解决方案不同，这里的点具有不同的半径和不同的颜色。此外，欢迎您通过使用输入设置文本来更改文本。鼠标光标具有平滑而温和的行为，可以分散人群并导致操场上的小骚动。这是一个真正令人赏心悦目的演示。

参见 Louis Hoebregts 的 Pen Text toparticle

驱虫效果可以很容易地与其他基于物理的解决方案相结合，带来出色的效果。考虑球和重力。

项目名称说明了一切。重力以及排斥效应是这个概念的核心——让体验变得有趣。

与前面的示例不同，这里您需要抓住圆圈并将其用作推开其他圆圈的工具。你几乎可以击中这些五颜六色的扁球，迫使它们移动。此外，您需要对抗重力，这使得体验更加令人兴奋。

查看 Marco Dell'Anna 的 Pen BALLS&GRAVITY

Marco Dell'Anna 的这个项目也是围绕重力构建的。您可以使用鼠标光标控制它。使用它来移动粒子并重新排列它们的位置。

请注意，即使粒子会改变它们的位置，它们仍然会努力回到圆圈中。所以在这里，你可以看到一个起到磁铁作用的鼠标光标，同时，一个用来推开点的工具（至少是暂时的）。

查看笔吸引器 – Marco Dell'Anna 的 MatterJS

Activate 是 Gerard Ferrandez 创造的一款出色的笔。就像前面的例子一样，作者也选择了重力。这次它结合了流体行为，当然还有排斥效果。结果，该项目以其嬉戏的外观和俏皮的性质吸引了我们。

查看 Gerard Ferrandez 激活的 Pen

排斥效果对粒子动画也有很大帮助。你可以让他们更加激动人心。看看 Moar Plasma。

在这里，您可以看到一个混乱的动画，鼠标光标通过将它们推到不同的侧面来吓跑所有粒子。您不仅可以享受演示，还可以与之互动。

参见 John Chin-Jew 的 Pen Moar Plasma

Snowy Particles 是另一个很好的例子，传统的粒子动画得到了提升。笔的作者 Nat 使用了两个技巧。

首先，鼠标光标有能力将简单的点变成雪花，让场景感觉真的很神奇。其次，添加了一个小的驱虫效果，可以稍微分散雪团，以便您可以看到独特的雪片。简直太棒了。

请参阅 Nat 的 Penparticle.js snow

排斥效果带来好处并轻松将沉闷的场景转换为盛宴的另一个领域是文本效果。我们已经看到由一千个点组成的单词看起来很出色。是时候将点变成线，并用排斥效果为所有东西增添趣味。考虑以防万一。

该项目以一个词为特色，其中符号由指向观众的短而细的线组成。通过这种方式，您几乎可以感受到它的体积性质。抓住鼠标光标并将其拖过文本，您将看到线条如何开始跳舞。

他们的行为流畅且令人赏心悦目，即使文本本身感觉有点尖锐和尖锐。此外，线条也会自行移动，所以感觉就像有一阵微风吹拂着构图的一部分。因此，您可以享受真正的杰作，其中简单的文字运行节目。

参见 Rein van der Woerd 的 Pen Repellers

尽管排斥效果被用来推开构图的细节，但它仍然是完全有磁性的。你不能把目光从它身上移开。它以其俏皮的行为立即引起了人们的注意，并促使用户与场景进行交互。

在赢得观众的斗争中，排斥效应并不孤单。它与其他类型的动画和效果完美协作，带来独特的、引人注目的解决方案。