繁荣！检查网页设计中的爆炸

已发表: 2020-06-03

有很多方法可以吸引观众的注意力。我们被选择宠坏了，尽管目前的技术状态仍然不完美。我们遇到了一些浏览器兼容性问题，并不是每台设备都能处理 Web 开发人员带给我们的所有宏大解决方案。

尽管如此，以图片为主要驱动力、以花哨过渡的滑块为唯一香料的静态网站的日子已经一去不复返了。我们正在见证一个充满大胆想法和盛宴的时代。

其中最重要的方面是开发人员不会将他们的注意力限制在大事情上。是的，我们可以看到大量的画布动画、压倒性的 VR 和需要全屏模式的视频实验等。然而，今天即使是最微小的细节也会受到关注。

网站上充斥着微观解决方案，尤其是那些基于鼠标光标的解决方案。我们可以偶然发现许多聪明的想法。它们很棒，但在大多数情况下，它们是（我要找的词是什么？），“安静”。我不是在谈论它们发出声音，因为某些基于鼠标的解决方案实际上确实会发出声音。我说的是他们的行为。

他们的举止流畅、平静、温和。在某些情况下，它是如此无缝，以至于几乎无法察觉。而且，如果您对内容过于投入或有其他一些分散注意力的元素，您甚至可能会忽略它们。那么，为什么不让它们“响亮”一点，让用户不会错过享受它们的机会呢？

如何做到这一点，你可能会问。我有一个很好的解决方案：让事情爆炸——字面上和比喻上。

Dean Wagman 的《太空中的粒子》

以 Dean Wagman 创建的这个奇妙的代码片段为例。虽然这是 Dean 进行的第一次帆布实验，但它非常鼓舞人心。你需要做的就是点击屏幕上的任何地方，你会看到数百个明亮的小粒子爆炸，它们正飞到你的脸上。尽管它没有发出声音，但它确实让人感到喧闹。

见笔
Dean Wagman (@deanwagman) 的《太空中的粒子》。

爆炸效果总是会唤醒一种感觉，即发生了一些响亮的事情。那么，为什么不利用这个优势，在不发出实际声音的情况下添加一些噪音呢？更重要的是，我们在这里有一系列精彩的代码片段。让我们一起探索它们。

Aleksei 的粒子爆炸 / Christopher Lis 的 Kaboomerz

如果 Dean Wagman 的解决方案看起来有点过多，您可以随时尝试 Aleksei 的 Particle explode。或者，相反，如果您需要产生更显着的影响，您可以随时采用 Christopher Lis 的 Kaboomerz。

第一个代码片段具有迪恩爆炸的“小兄弟”版本，其中数十个微小粒子形成一个小爆炸，迅速出现并消失。以克里斯托弗·利斯为例，您会对粒子的大小感到惊讶。从鼠标光标中出现的五彩纸屑非常巨大。然而，由于它们的寿命很短，整体效果并不是压倒性的。这只是令人愉快的。

见笔
Aleksei (@alek) 的粒子爆炸 JS/CSS3。

见笔
#Codevember 5 – 克里斯托弗·利斯 (@chriscourses) 的 Kaboomerz。

DOM 爆炸由 David A.

如果您喜欢这个想法，但需要更多类似数字和复古风格的东西，那么大卫创造了一个惊人的解决方案。他使用各种大小的矩形而不是圆形来实现可爱的 8 位触摸。因此，我们可以见证 80 年代魅力的小规模爆炸。

见笔
David A. (@meodai) 的 DOM 爆炸。

CreateJS 的 WebGL 闪耀

如果您寻求真实的版本，CreateJS 的 WebGL Sparkles 是一个值得考虑的完美示例。尽管这里的所有粒子都是白色的，但由于经过深思熟虑的行为，当您单击屏幕时，它看起来就像真正的庆祝枪声。更重要的是，光标有一条可爱的轨迹，给场景带来了一丝魔力。

见笔
CreateJS：由 CreateJS (@createjs) 制作的 WebGL Sparkles。

Christopher Lis 的自动烟花发射器

说到这一点，如果没有一剂烟火的疯狂，我们的爆炸集合将是不完整的。 Christopher Lis 的 Automatic Firework Launcher 是一个值得考虑的好例子。这是一个卡通烟花发射器。由于五颜六色的颗粒和康乃馨般的形状，它让我们想起了照亮星空的真正烟花。

见笔
第 29 天 - Christopher Lis (@chriscourses) 的自动烟花发射器。

LegoMushroom 的模态窗口破坏概念

画布实验并不是我们列表中唯一的实验。爆炸效果可以应用于界面的各种元素，例如模态窗口。 LegoMushroom 生动地证明了这一点。看看他们的模态窗口概念。当您关闭窗口时，它不仅会消失，还会分成几部分。它是当今非常流行的所有精美的全插图网站的完美补充。

见笔
LegoMushroom (@sol0mka) 的模态窗口破坏概念。

Sylvain Garnot 的 SCSS 爆炸效果 / Kacper Bawol 的 SVG 文本爆炸 / Tim Horwood 的 Canvas 文本爆炸

爆炸效果也有利于排版。考虑 Sylvain Garnot 的 SCSS 爆炸效果、Kacper Bawol 的 SVG 文本爆炸和 Tim Horwood 的 Canvas 文本爆炸。

这三个都展示了应用于文本的爆炸效果。可以预见的是，鼠标光标会触发每一个。

Sylvain Garnot 让用户将每个字母炸成一百个小方块。 Kacper Bawol 的概念看起来几乎相同，但这次符号分解为小三角形。而且，Tim Horwood 允许用户将整个文本分解成微小的粒子，这些粒子最终会返回并将所有内容恢复到原始状态。这三个想法都令人难以置信。

见笔
SCSS – sylvain garnot (@sylvaingarnot) 的爆炸效果。

见笔
Kacper Bawol (@Casperovic) 的 Svg 文本爆炸。

见笔
画布文字爆炸，点击查看 Tim Horwood (@tdhorwood)。

Ko.Yelie的房子爆炸

爆炸效果也可以应用于图像。 Ko.Yelie 的这个概念就是一个很好的例子。通过单击图片，您可以将其炸成小块。尽管在现实生活中的界面中很难找到适用于此的应用程序，但触手可及的一些非凡的解决方案总是很棒，可以让常见的事物看起来独一无二。

见笔
Ko.Yelie (@ko-yelie) 的房屋爆炸。

一个爆炸性的功能

爆炸效果是一个有争议的工具。由于其“爆炸性”性质和强大的魅力，它并不适合所有的界面。尽管与鼠标光标一起使用时看起来无害甚至中性，但它非常“响亮” - 所以你需要小心。

请记住，并非所有人都从网站上寻求娱乐。并不是每个人都喜欢奢华的表演和压倒性的印象。归根结底，内容始终为王。

但是，如果您正在寻找一些不寻常的方式来制作有趣且可以说“响亮”的令人兴奋的用户交互，那么爆炸效果无疑会派上用场。