网站设计缺乏创意?视差滚动网站设计让你与众不同

2018年4月16日03:01:00 评论 3,888

进入Mockplus团队后,我开始深入接触设计。工作过程中,也会和用户讨论一些设计项目的问题。在和用户交流过程中,我发现,用户的疑问不仅包含各种各样的Mockplus使用问题,很多时候,在解决用户疑问的同时,我也能感受到他们对于设计创意的缺乏。比如网页项目的设计,可能数十个用户的创意都如出一辙。

如何让自己的网站设计与众不同呢?你也许需要一些更多的灵感和技巧。

让一个网站看起来酷炫,丰富,具有吸引力。你可以添加多种多样的设计效果和技巧。而视差滚动效果则是其中一个很不错的选择。这里,Mockplus团队精心整理了 20 多个视差滚动网站设计,希望您在看完这些不错的设计后,也可以使用Mockplus做出同样创意满满的网页视差原型设计

首先,什么是视差滚动设计呢?

视差滚动,英文为Parallax

Scrolling,是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。网页设计中的视差效果的最常见的一种,就是用户在向下滚动页面或跨页面时可以创建3D滚动效果。视差设计如果做得好,将会大大提升用户体验,吸引更多的用户。

接下来,我们一起看看这些优秀的视差滚动网站设计吧。

1. Femme Fatale

Femme

Fatale是一家专注于文化,奢侈品,社论和艺术的创意工作室。它包含了精彩的动画互动页面,可以很好的调动访客的情绪。当你向下滚动页面时,页面背景会伴随页面滚动条进行切换,每个页面的背景色各不相同,在页面滚动切换时,页面文本会以不同的速度载入,和页面图像等其他元素形成视差滚动。

网站设计缺乏创意?视差滚动网站设计让你与众不同

2. Every Last Drop

Every
Last
Drop是一个展示生活用水场景的网站,旨在呼吁关注地球水资源,节约水资源。设计师以等比例分割页面进度条,当你向下滚动页面时,您会看到各种不同的生活场景里水资源是如何被消耗的,并且展示水资源使用的占比等数据。每个场景的切换都带有动画视差效果。在其“Universe”页面还增加了3D视差滚动效果。

网站设计缺乏创意?视差滚动网站设计让你与众不同

3. Beer Camp

Beer

Camp整个网站页面划分为 5 个页面层,当你滚动时会有一种“一镜到底”的感觉。并且它的视差滚动效果非常与众不同,它既不是水平也不是垂直的,而是一种平滑缩放的效果。当你滚动页面时,各个层都可以连贯地依次放大到页面最前端。加上明亮的配色和粗放的版式,创造出一种惊人的空间感。

网站设计缺乏创意?视差滚动网站设计让你与众不同

4. Porsche Volution

Porsche Volution完全可以看出设计师对汽车的热爱以及对保时捷品牌的浓厚兴趣。整个页面设计以视差滚动照片的形式展示了保时捷的进化,并且配有高雅的背景音乐,配色惊艳。屏幕左侧有一个时间轴,向下滚动时,可以清晰的看到保时捷的进化历程。

网站设计缺乏创意?视差滚动网站设计让你与众不同

5. Spokes

Spokes
Eclectic Pedicab
Rides是一个提供停车和公共交通的即时解决方案的网站。这个网站号召绿色生活和经济生活,对以倡导骑车为中心的社区文化有极大的意义。该网站是漫画风格,滚动页面时会以不同进度载入页面元素,具有丰富的视差效果。顶部导航栏的设计也是一个亮点。

网站设计缺乏创意?视差滚动网站设计让你与众不同

  • 我的微信
  • 台儿庄,一个寻梦的地方。
  • weinxin
  • 微信赞赏码
  • 您的赞赏,必超所值!
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: