首页 > 网页教程 > 设计分享 > 23个案例分析视差滚动网站设计创意思路

23个案例分析视差滚动网站设计创意思路

时间:2018-04-16    来源:Mockplus

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

相关推荐
30个国外立体动感的视差滚动效果网站欣赏
20个超棒的国外单页网站设计欣赏
最新Web设计8个趋势:视差滚动 响应式设计等
25个带视差滚动效果创意网页设计案例赏析
年度最佳!20个最优秀的网页设计案例欣赏
20个巧用视差滚动的网站设计欣赏 效果超酷!
30个幽默有趣的404错误页面创意设计欣赏
分享:网页核心内容对视觉表现的影响
网页设计的背景创意风格与设计趋势分享
20+艺术视觉和网页完美统一的网页创意案例欣赏
21个带斜线排版设计的网站设计创意欣赏
55个极具创意的手绘网页设计案例欣赏
从优秀案例分析网页Banner视觉构成与创意设计
15个运用创意印刷字体的网站欣赏
产品设计:万水千山总是情 不要图片行不行
15个最佳创意型404错误页面案例赏析
15个国内外优质设计分享平台推荐 设计师必收藏
网页设计怎么破?创新式布局与交互的设计
12个启发灵感的创意单页网站作品欣赏
8个即将过时的网页设计趋势剖析
21个优秀的国外电子商务网站赏析
22款“暗黑系”的网页设计案例欣赏
四大网页设计秘诀:让用户第一眼就爱上你的网站
构图之美:成功的专题都是怎么构图的?
38个创意出彩的网页字体设计案例赏析
9个国外杰出创意网站精选案例欣赏
25个设计有趣的创意型网站404错误页面欣赏
网页设计教程:让页面活跃起来的四个技巧
网页设计教程:11个获得创意灵感的来源
化腐朽为神奇!如何利用坏图创造出好设计?
网页设计分享:如何预知未来的大势所趋?
设计完美极简风格网站的六个步骤分享
24个采用特色人像背景的全屏网站设计案例欣赏
中枪了没?设计师最常见的11个设计误区
网页设计的10个灵感来源分享
如何将圆形元素优雅地搭配运用在网页设计创意中

精彩推荐

热门教程