19个极好的视差滚动网站

IT资讯 2018-08-06 52 次浏览 0 条评论

这些网站向世界展示了如何完成这项技术。

一种拒绝消失的网页设计趋势是视差滚动。有了这个,网站布局看到网页的背景以较慢的速度移动到前景,在滚动时创建3D效果。它有时可能是压倒性的,但是当谨慎使用它时,它可以提供一个漂亮,微妙的深度元素,从而形成一个独特而令人难忘的网站。

但是为了展示它应该如何完成,我们收集了使用该技术以获得良好效果的网站。在某些情况下,视差滚动是节目的明星;在其他情况下,它只是增加了一点深度,使前景看起来有点突然出现。

01.熊格里尔斯

数字机构Outpost的任务是为探险家和电视名人Bear Grylls创建一个新的数字战略。 “为了实现新的品牌愿景和价值观,体现'冒险品牌',我们需要让人们在网上旅行,”该工作室的案例研究说。丰富,动态的用户体验是关键。

整个过程中使用了微妙的视差,但真正的场景窃取者是主页。 Grylls出现在戏剧性的山景中,观众在滚动时被吸引到场景中。这是对冒险的一个很好的介绍。

02. ToyFight

ToyFight是一个屡获殊荣的创意机构,它的网站非常有趣。创始人Jonny Lander和Leigh Whipday将自己变成了3D人物,这些人物出现在整个网站的各种场景中(包括这个厚颜无耻的Sagmeister&Walsh参考)。巧妙地使用视差可以放大3D效果,并与大胆,明亮,朴素的背景搭配,永远不会变得压倒性或刺激性。

03.你好星期一

Hello Monday是一家总部位于丹麦的设计机构。它旨在创造沉浸式数字体验,讲述故事并为用户带来快乐,并且它已经超越了其投资组合网站。在创建工作室网站时,难点在于采用酷炫或前沿的设计理念通常意味着牺牲清晰度和可用性,这对于设计组合至关重要。

Hello Monday通过在精简的页面布局中引入微妙的视差效果来实现两者。每个项目的英雄形象都会略微移动,使其焕然一新,为设计增添活力,同时不会影响节目中的信息。效果仅在工作室的主页上使用,单个项目页面保持静态以允许工作闪耀。

04. A-dam

A-dam网站的屏幕截图显示了男士内衣

A-dam使用视差来展示其时尚的内衣

A-dam使用GOTS认证的有机棉为男士设计原创拳击手三角裤和短裤。拳击手由工资和正常工作时间的人手工制作。它们是您通常的超市裤子的道德和时尚替代品,他们的网站由Build in Amsterdam创建,很好地展示了它们,当您滚动时各种方向都会出现各种各样的视差元素。

05.柴油:BAD指南

84.巴黎创造了这个令人印象深刻的视差网站(以及相关的社交媒体活动),以配合Diesel的BAD香水的推出。这个单页的网站提供了构成“BAD指南”的一系列规则。

用户可以通过在视差页面周围拖动鼠标来进行探索,该视差页面的布局类似于点击图像的插板。有关Tinder的所有建议('向右滑,向右,向右 - 你将稍后将它们排序')到Instagram('不要忘记在星期四#TBT'与前任联系),伴随着单色插图。
06.无数

Myriad网站的屏幕截图显示了'Myriad'的形状

Bareface的Myriad网站展示了家具系统的无限可能性

Myriad是Boss Design提供的一系列模块化办公家具,其设计灵活且可重新配置,让您可以根据自己的需要建立自己的工作空间。作为其发布工作的一部分,Bareface创建了一个网站,通过巧妙地使用视差元素展示Myriad的无限可能性,在您探索网站时提供鼓舞人心的家具布置。

07. Firewatch

Firewatch网站的屏幕截图显示在黎明时看着金色峡谷的徒步旅行者的插图

每层树都独立移动
我们见过的最美丽的视差滚动示例之一是Firewatch游戏的这个网站,它使用六个移动层来创造一种深度感。这很好,因为没有滚动劫持(通常伴随着视差效应),它只在页面顶部使用 - 网站的其余部分仍然是如此,您可以阅读信息而不会晕船。如果你想看看它是如何完成的,这里是CodePen的一个很好的演示。

08.花园工作室

花园网站的屏幕截图显示了在红叶树下俯瞰湖泊的长凳的插图

分层的景观使它看起来是三维的
同样,花园工作室也选择在其网站顶部以合理和令人愉快的方式使用视差技术,然后进入一个大多数静态的页面。变化的景观是微妙的,不引人注目的,但也是节目的明星 - 我们发现自己一次又一次地上下滚动。

09. GitHub 404

GitHub的404页面截图显示了一个卡通绝地型角色,说“这不是你要找的网页”

GitHub的404打破了视差规则以获得迷惑效果

这不是严格的视差滚动,因为效果发生在鼠标摆动而不是滚动,但它是一个非常有趣的页面,使用分层来增加深度。与“适当的”视差不同,背景比前景移动得更快,从而产生迷失方向,超凡脱俗的感觉。

10.杰斯和拉斯

屏幕截图显示了一个穿着白色连衣裙的女人的插图,在晚上由城市天际线快速携带

每个插图都有深度感
毫无疑问,设计力量的夫妇Russ Maschmeyer和Jessica Hische的婚礼网站是一个值得一看的美女。该网站列出了他们的浪漫故事,整个过程中使用了视差滚动来增加插图的深度。他们在2012年结婚,但该网站仍值得一看。

11. Alquimia WRG

视差滚动网站示例:Alquimia

Alquimia WRG使用视差元素来模拟3D空间环境

Alquimia WRG总部位于米兰,是一家数字机构,旨在为数字媒体上的品牌创造惊人而有效的体验。网站使用混合了通常的嫌疑人(HTML5,CSS和JavaScript)来实现整洁的包装,干净简洁,只有黑白两色。

HTML5画布用于为初始加载图像设置动画。 Alquimia的创意总监Andrea Bianchi表示,主页中的微妙“视差元素是动态创建和动画的,通过鼠标移动来模拟3D空间环境。”

页面导航是通过简单而流畅的页面滑动效果实现的,该效果通过使用JavaScript更改CSS属性来实现。工作页面包含所选项目的简单列表,选中后,将以平滑的滑动效果显示更多信息。

加载此类内容时,屏幕底部会出现一个JavaScript动画预加载栏,这是一个不错的选择。该网站实现了其目标,正如Bianchi所说,“是在内容,可用性和用户体验之间创造理想的平衡”。
12.让你的钱变得重要

视差滚动网站的例子:让你的钱变得重要

通过Make Your Money Matter提供的信息和建议来管理您的财务状况
金融和金钱不是最有趣的科目。但总部位于纽约的数字代理商Firstborn正在利用这个动态的视差滚动网站为公共服务信用联盟赚钱。

为了向公众传授加入信用合作社的好处,而不是使用银行,这个辉煌的网站包括从信用合作社如何运作,到哪里找到以及如何申请,以及计算器显示的一切银行从客户的存款中获利多少。

13.西雅图太空针塔

视差滚动网站示例:西雅图太空针塔

炒鸡蛋遍布我的脸。男孩要做什么?
西雅图标志性太空针塔的起点位于605英尺高的塔楼底部,邀请您一直向上滚动,沿途欣赏西雅图和SkyCity餐厅的景色。如果605英尺不够高,请继续滚动,看看你发现了什么!

14.马德威尔

视差滚动:Madwell

纽约代理商Madwell使用视差滚动来增加深度感
位于纽约的设计和开发机构Madwell通过一系列视差滚动效果展示其产品组合,创造出明显的3D风格,增加了巨大的深度。

15. Peugeot Hybrid4

视差滚动:Madwel

标致使用视差滚动来创建一个自动播放的网络漫画
标致已全力以赴使用视差滚动在浏览器中创建自动播放漫画。当您向下滚动页面时(或使用自动滚动的自动播放功能)漫画播放,并有助于宣传汽车制造商的新HYbrid4技术。

16.文化解决方案

视差滚动:Madwe

圆圈以不同的速度移动以获得微妙的3D效果
艺术咨询公司Cultural Solutions采用微妙的视差滚动效果为其主页引入深度。它的主要品牌形象是使用彩色圆圈 - 背景中的圆圈比前景中的圆圈移动得慢,从而产生微妙的3D效果。

17.行尸走肉

视差滚动网站:行尸走肉

行尸走肉使用视差滚动将你带入其血腥的世界

我们是Creative Bloq的电视僵尸剧“行尸走肉”的忠实粉丝,我们被这个推出它的网站所吸引。这个富有想象力的网站可以追溯到该剧的漫画起源,巧妙地利用视差滚动将你带入生病和堕落的世界。

首席设计师加文贝克说:“我们作为展会的粉丝首先参与其中。” “通过这个驱动器,我们想要在行尸走肉中创造一个粉丝可以探索和欣赏的世界。

“为实现这一目标,我们研究了几种现有技术和技术,如HTML5,CSS3,JavaScript / jQuery,Web音频/ HTML5音频和视差滚动。面临的挑战是如何找到一种独特的方法将所有这些方法融入到一次参与中跨所有平台的经验。“

18.纽约时报:番茄可以蓝调

视差滚动网站的例子:纽约时报

纽约时报的这篇视频滚动文章将带来美妙的体验
在今天的低关注度和一口大小的媒体时代,你如何吸引人们来推动新闻业的发展?这是纽约时报对这个问题的一个很好的回应,将一些聪明的网页设计技巧与Atilla Futaki创作的讲故事和漫画风格插图相结合。

这篇文章是我们见过的视差滚动的最佳例子之一,文章将向您介绍由Mary Pilon编写的笼式战斗机的故事。当您滚动浏览内容时,插图会通过巧妙的动画和更改生动,让您完全沉浸在内容中。

Futaki的插图基于警方记录,证人帐户,照片和记者的笔记,并注重细节。总而言之,这是一次很棒的阅读体验 - 这是在线新闻的未来吗?

19.降雪

视差滚动网站示例:Snow Fall

纽约时报的“Snow Fall”文章为丰富的视差网站带来了全新的热潮
纽约时报的Snow Fall文章结合了一系列不同的元素,包括视差滚动和网络视频,这是首批真正突破你可以通过在线长篇编辑内容做些事情的界限之一。

这篇关于Tunnel Creek雪崩恐怖的文章于2012年12月在网上发布,但作为你可以用视差滚动做的一个例子,它仍然很强大。该报以创新的方式介绍了获得普利策奖的文章,吸引了全世界设计界的关注。

0
小包子

【 飞龙网.com:小包子】为你推荐!我的文章如同我的名字,香甜可口,咸淡适宜,油而不腻,阅后令你回味无穷尽哦~

发表评论