美妙的代码片段尝试流行的粘效果

粘稠的效果是那些功能之一,它能够将界面从大量的项目中分离出来,这些项目具有粗糙的方形美学和标准的解决方案。当然,在高端技术的帮助下建立网站是一种趋势,这些技术可以让你做一些更鼓舞人心、更复杂、更令人印象深刻的事情。然而,并不是每个网站都需要一个强大的动画或惊人的解决方案。有时,小的原始效果应用到,例如,按钮或用于增强过渡显示菜单可以做更多的好处项目。

小糖果是更好的选择

让我们不要忘记,这些高级库仍然需要改进跨浏览器兼容性和性能速度。至于粘稠的效果,它很轻,实现简单,处理速度快,最重要的是它自然给用户体验一种前沿的感觉。它的时尚,精致的流体般的行为,使网站上的东西感觉有趣和朗朗上口。

由于其灵活性、通用性和轻便性,它可以使界面的任何元素受益。启动加载程序的类加载器与茱莉亚Rechkunova粘性效应,简单的动画的点相互交互娱乐游客和中放入他们的等待,最后的核心任务是给游客留下深刻印象像蜜糖的圆点花纹由马修弗尔涅。在他的实验中,一组大小不一的彩色圆点在屏幕上分散开来,形成了一种混乱的运动,呈现出一种粘稠的效果。这些气泡部分地相互作用。这个想法很简单,但肯定会迫使你停留一段时间。

Julia Rechkunova设计的装载机,具有粘稠的效果

Julia Rechkunova设计的装载机,具有粘稠的效果

马修·福尼尔(Matthew Fournier)设计的黏糊糊的圆点花纹

马修·福尼尔(Matthew Fournier)设计的黏糊糊的圆点花纹

让我们探索从该技术中获得好处的其他方法。所有的解决方案都是有效的代码片段,可以在家里检查并用于重现一些令人难以置信的东西。

虽然它只是一个放置在页面中心的大圆圈,但是这个想法很聪明。使用鼠标从中心圆产生扁平的气泡,然后将它们拖到你想要的地方。你提取的气泡越大,母圆就越小。真正的接触。

GOOey by Tiffany Rayside

需要更有趣的解决方案,以吸引游客的行动来看看其他一些例子,如哈里帕顿的Gooey过渡,或小林洋一的Gooey覆盖。

Harry Patron的代码片段以巧妙的重建效果为特色,可以用作页面、幻灯片之间的过渡,甚至可以用作显示或隐藏菜单的辅助效果。移动是作为一个层,开玩笑地下跌。

小林洋一(Yoichi Kobayashi)提出了几乎相同的概念,但在他的作品中,效果是水平方向的。它从右边开始,有两种颜色,分层移动。

哈里·帕顿的《粘乎乎的过渡》

哈里·帕顿的《粘乎乎的过渡》

Yoichi Kobayashi报道

Yoichi Kobayashi报道

卢卡斯·贝伯有几部关于这种黏糊糊的行为的精彩电影,既实用又令人印象深刻。他利用效果改善了网站界面的基本元素。因此,他的分页显示为一组圆圈,其中圆点之间的平滑过渡伴随着切换;菜单是一个传统的浮动按钮,以一种令人愉悦的粘性方式显示导航链接。这个概念有几种变体。

卢卡斯贝伯的分页

卢卡斯贝伯的分页

菜单由卢卡斯贝伯

菜单由卢卡斯贝伯

任何UI的另一个基本细节都可以从效果中获得好处,那就是按钮;看一看Adrien Grsmto和Gooey GUI编写的Button bubble effect,第1部分由@keyframers编写。在第一个例子中,粘稠的效果被谨慎地应用,给了成分一种微妙的,微妙的热情;在第二个例子中,它支持元素的整体美感。

按钮气泡效果由阿德里安Grsmto

按钮气泡效果由阿德里安Grsmto

Gooey GUI第1部分@keyframers

Gooey GUI第1部分@keyframers

最后但并非最不重要的SVG Gooey悬浮菜单的概念,由迈克尔伦纳德,这是鼓舞人心的。在这里,解决方案的边界具有弹性的行为,带来了一个杰出的结果。它微妙而脆弱,同时又给人以深刻的印象。

SVG胶粘悬停菜单的概念由迈克尔·伦纳德

留下深刻印象

如果交互不是案例,那么您可以使用Gooey效果来制造印象,可以考虑Piotr Galor的Pure CSS Gooey Morph, Jeremie Boulay的Gooey Fire和Misaki Nakano的blobs。这三个例子仅仅是作为娱乐的工具。

由Piotr Galor设计的这个项目展示了一个带粘性行为的变形的实心圆。虽然它不与游客互动,但它作为一个完美的动态背景,很好地描绘了标语,同时也避免了首页感觉枯燥。

纯粹的CSS粘稠变形由彼得格洛尔

纯粹的CSS粘稠变形由彼得格洛尔

Jeremie Boulay用黏液来重现篝火动画。一切都从一个火球开始,用户可以玩,可以互动。使用它来生成更小的火球,这些火球将跟随鼠标光标在屏幕上移动。这是非常吸引人的动画。

Jeremie Boulay的《粘稠的火》

Misaki Nakano使用粘稠效果的想法很聪明。它具有与前一个示例相同的功能,但这一次它只是一个移动的圆,因此可以说是“呼吸”。它也跟着鼠标移动,留下五颜六色的圆形痕迹,最终消失。这是一个令人兴奋的方式来吸引游客,并使主屏幕看起来诱人。

作者:Misaki Nakano

还有另外两个例子,我们想让大家注意一下:

这两个例子告诉我们,效果也可以应用到布局中。因此,Ines Montani演示了如何将文本放入浮动圆角的块中;此外,Tobias Bogliolo还对布局进行了实验,使各部分的边框能够响应鼠标的移动。

带有SVG过滤器的粘稠文本背景,Ines Montani设计

带有SVG过滤器的粘稠文本背景,Ines Montani设计

Tobias Bogliolo设计的交互式布局

Tobias Bogliolo设计的交互式布局

结论

正如你所看到的,粘稠效果是一个非常普遍的工具,可以为任何项目增加多样性。它是灵活的,轻量级的,易于复制:只需借助HTML、CSS和JS,您就可以得到一个可行的解决方案,使用户界面脱颖而出。

它可以应用于用户界面的所有细节以及独立。使用它来增强整个用户体验与杰出的互动泡沫动画或微小的粘性伴随效果。

2019-12-31 16:28
相关热门