烟雾效果是否将成为一种新趋势?

网站的首页包含很多功能,比如:品牌、图标、图片。现在很多的网页设计开始流行使用动效;越来越多的网站使用这种设计让原本的网站变得与众不同,而且还在一些社区得到认可。

市面上有很多使用动画方式的网页设计,但是我们发现了一种新趋势,那就是通过使用烟雾效果来过渡页面,从而让我们的页面变得更加生动。

Sevenhills Wholefoods

1

Sevenhills Wholefoods是一个虚拟的农贸市场网站,它帮助他们的客户通过食用天然食品增强身体健康从而改变他们的生活。除了使用以故事为中心的设计方式来展示产品外,还有什么方式了?他们为自己的产品创建了一系列用户情景,从而阐述用户旅程的每一步。最令人着迷的是当你切换到“探索旅行”这里时,烟雾过渡的效果让这种切换方式非常流畅。

他们在三月份得到了Awwwards.com、theFWA.com和cssdesignawards.com网站里面的“网站一天”的这些奖。干得非常不错。

RobinMastromarino

Robin Mstromarino 网站是一名法国 的UX/UI 设计师,通过使用演示的方式来阐述他的工作性质。Robin的网站是我们最爱的网站之一,不仅仅是因为它使用了一个简单的设计,而是他通过使用烟雾的过渡方式让网站非常漂亮,也证明了我们的观点。

2

Robin Mstromarino在四月份赢得了Awwwards.com、Cssdesignawards.com、csswds.com这些网站里面的“网站的一天”、同时也赢得了theFWA.com网站“移动的一天”这个奖。恭喜他。

Trainrobber

3

我把它叫做“烟雾过渡”,Trainrobber是一个“危险虚拟故事讲述者”团队,在他们的网页里,使用了很多视差导航和烟雾效果。

他们赢得了4月份Awwwards.com和theFWA.com的“网站的一天” 奖。干得好。

Cavalier

4

Cavalier是yourmajesty.co制作的网站,他把游戏做成网页来测试,从而去测试最新的网络技术。在他们页面里烟雾过渡的这种风格被呈现出来(从另一方面来说,这个游戏我只得到了42分)

为了方便一些极客也能制作出同等效果的网站,我们把他们使用了那些技术写在了下面:HTML5, CSS3, WebGL, Pixi, JavaScript, three.js,SVG animation, bodymovin.js, howler.js, 3D audio, WebAudio, GSAP.

他们得到了五月份Awwwards.com、 theFWA.com和cssdesignawards.com这些网站的“网站的一天”这项奖。 非常不错。

National Geographic

5

National Geographic网站讲诉了以熊的视野来观察黄石公园。我不在乎熊的世界;我关心的是他们如何把这个故事组合在一起,使它成为一个有趣的经历。网站结合很好的技术来使用“烟雾过渡”效果,从而来呈现照片里面的熊。这是一个很好的网站例子,如何创建一个让人难忘的网页故事的同时拥有很好的体验。

总的来说,这些网站有什么共同点了?恩~他们都赢得了奖。

下面有一些制作“烟雾过渡”效果资源:

通过使用CSS和JavaScript来制作烟雾效果

6

Pixi.js

7

假如我们错过了一些使用相同效果的网站,请在评论中分享链接。

对于这种风格,你有什么想法了?你认为烟雾过渡这种效果是否会引起一种趋势了?或者你认为还有其他元素会引起下一个新趋势?

打赏支持我翻译更多好文章,谢谢!

打赏译者

打赏支持我翻译更多好文章,谢谢!

任选一种支付方式

1 1 收藏 评论

关于作者:设计师Minz

(微信公众号:Designer_Minz)一枚成长中的设计师,点滴积累,人人都能成为设计师。 个人主页 · 我的文章 · 1

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部