滚动页面是一个很常规的操作，结合这个交互行为可以在设计上有哪些可以发挥的点呢？可能这对很多人来说，算是一块知识盲区，那么就跟着这篇文章一起来学习吧！

设计师应该要了解网页上各种效果的实现能力，才能给用户创造出非常吸引人的视觉体验。

滚动页面是一个很常规的操作，结合这个交互行为可以在设计上有哪些可以发挥的点呢？可能这对很多人来说，算是一块知识盲区，那么就跟着这篇文章一起来学习吧！

视差滚动特效是用户在滚动页面的过程当中，页面中不同元素随之进行不同速率的运动，所营造出的接近3D的视觉效果。设计中增添音频和视觉为内容赋予了更多的生机，传达出许多纯文字无法捕捉到的内容。滚动视差以步步推进的方式传达出内容，以吸引人们阅读，它利用了网页的优势呈现出非常棒的视觉效果。

 

当你想要表达一个细腻故事时，考虑使用滚动视差设计

滚动视差设计特别适合用来叙述一些细腻内容，随着内容慢慢铺开，通过设计能使得内容变得更加鲜活。滚动视差能够突出故事内容，并把你吸引到它的叙述中。优秀的设计能够使得每一页的衔接自然流畅，使你在下滑页面的过程中更加专注于内容。

我收集了一些非常好的滚动视差设计案例来帮助大家设计出属于自己的网页效果。

 

案例1：Snow Fall: The Avalanche at Tunnel Creek （发生在隧道溪的雪崩）

Snow Fall：The Avalanche at Tunnel Creek(http://www.nytimes.com/projects/2012/snow-fall/index.html#/?part=tunnel-creek) 是一部引人入胜的杰作。这是2012年华盛顿雪崩的悲惨故事，这个故事的每个部分都有自己独立的页面。

这是一份引人入胜的读物，配有音频和视频媒体，可以让大家更全面的了解那悲惨的一天到底发生了什么。我们不仅能读到相关人员的故事，还能了解导致这次雪崩的地形和天气条件。

这是一种多媒体讲故事的方式，它揭示了本质原因，是什么促使了人们在寻求 *** 的过程中不顾危险。

 

案例2：Millennials are screwed（千禧一代的困局）

我们经常都喜欢拿千禧一代来开玩笑，但这一代确实面临着一些重大的挑战。 Millennials are screwed（https://highline.huffingtonpost.com/articles/en/poor-millennials/）这个网站通过一位年轻人的眼睛向我们展示了这个世界，以便清楚地了解他们所面临的挑战。

故事是由一位千禧一代的自述，用一种比较幽默的手段讲述了他们所面临的财务困境和其他现实问题。

这个网页是通过怀旧的视频动画游戏，结合像素化的图形和一些有趣的视觉效果来呈现的。它抓住了千禧一代人的复杂情感，同时也是为了让年轻人更容易接受和阅读。

读了网页上的内容，不禁让我对千禧一代产生了更多的同情。这就是一个很好的例子，使用智能，有趣的网页设计来连接更多的读者。

 

案例3：UTC is enough for everyone… right？（UTC对每个人来说都足够，对吗？）

对大多数人来说，世界标准时间（UTC）并不是一个特别吸引人的话题。但Zach Holman做了一个网站，解释了它的工作原理以及使用时的复杂性。他的网站风趣幽默，把枯燥的理论讲的通俗易懂。

在每一个分割内容之间会插入一些动态视频背景，这些设计既特别，又不会令人生厌。这些惊艳的视觉冲突吸引了读者的注意力，让大家有兴趣接下来会出现什么样的炫目视觉效果。

任何读过枯燥技术文章的人，都可能会昏昏入睡。这个案例在说明一件事，那就是富有创造力的展现形式可以将最枯燥的话题变得有趣。对于那些对程序设计不感兴趣的人来说，这个网站应该算是一份非常有吸引力的读物了。

 

案例4：Web design and art history（网页设计和艺术史）

慢慢滚动鼠标浏览网页设计和艺术史（https://webflow.com/web-design-art-history）就像真的是在一座博物馆里消磨时间（译者注：我滑了好久）。每一个内容区间都像一个画廊分支，展示了某一段时间内的流行趋势。这个网站，记录了艺术的演变。

由于网页设计和视觉艺术有一些共通的语言，熟悉艺术史可以启发自己创作出优秀的作品。如果你对艺术和设计感兴趣，这个网站将会是一份很好的入门读物。

 

案例5：The History of the Web: Interactions 2.0（Web设计历史：交互2.0）

滚动视差设计的使用打破了传统故事展示的局限，充分使用网页这种载体将创意发挥到极致。

Introduction to Interactions 2.0(https://webflow.com/ix2) ，这个网站带着读者围观了从web最初始的阶段一直到现如今不会写代码也能创造出很棒的网站的突破。网站里包含了许多令人愉悦的网页效果，回看这些历史不禁感叹，趋势的更新迭代是有快啊。

 

案例6：Time in Perspective（时间透视）

滚动视差设计是讲述线性故事的完美媒介——还有什么比时间流逝更线性呢？

从24小时直至宇宙的尽头，在 Time in Perspective(https://wfs2.webflow.io/time-in-perspective)滚动触发动画时间轴，显示每一个阶段。这是一个很好的例子，使用网页设计并不仅仅是为了营销，设计同时也是创新教育的有力工具。

 

案例7：If the Moon Were Only 1 Pixel （如果月球只有一个像素）

If the Moon were only 1 pixel(http://joshworth.com/dev/pixelspace/pixelspace_solarsystem.html) 网站使用的是一种横轴动画，带你穿越浩瀚的宇宙。Josh Worth在向女儿解释到达火星需要多长时间后创建这个网站，他想知道自己是否能用电脑来绘制太空地图。这个网站很好的聚焦于空间的深度，帮助我们理解宇宙的深邃。Josh Worth用一个像素代表了月球，然后显示了与其相关的一切物体。

这个项目是另一个很好的例子，说明好的设计可以让学习变得更有吸引力。

 

案例8：Islamic State Tracker（追踪 *** 国）

我们每天接收到的信息太多了，从海量的信息中，我们很难保证知道最新的状态。 *** 的追踪 *** 国（http://www.washingtonpost.com/wp-srv/special/world/islamic-state-tracker/?noredirect=on）展示了 *** 国的历史和当前发展。

右侧的界面，滚动可以浏览时间轴，而在界面的左侧则在地图上突出显示故事发生的位置。点击地图上的点，你就会看到那个位置的具体情况。将位置映射到每个事件可以更深入地了解每个区域。

 

案例9：Ali Wong Structure of Stand-Up Comedy（Ali Wong的喜剧结构）

马克吐温有句名言：“解释幽默就很像解剖一只青蛙，你在这个过程中是能学到很多，但最终你却把它杀死了。”但遗憾的是，对于他来说，没能等到数字时代的到来。

之前给出的很多案例都在讨论把滚动效果应用于时间轴相关的内容，喜剧表演是一种叙事性的表演，节奏和组合的重要性与真正的笑话一样。

Ali Wong Structure of Stand-Up Comedy是对Ali Wong最新脱口秀《Baby Cobra》的分析，它分析节目中的每一个瞬间，每一个笑话，以显示更大的笑点到底在哪里。这是一个关于时间和节奏如何能够带来更好效果的有趣研究，同时也让我们了解到Ali Wong为什么能成为如此出色的作家和演员。

 

滚动视差设计实现工具

我们已经了解了如何使用不同滚动效果来讲述不同类型的故事，以及其中包含的一些设计 *** 。为了帮助大家能做出自己的滚动视差效果，我收集了一些工具来帮助你。如果想在设计工作时进行尝试，Webflow可能是更好的选择。

 

1. 在滚动中制造视差

滚动时以不同的速度移动元素是创建视差的一种方式。视差是一个简单的效果，在故事中创造多维度的动画，促使人们继续阅读。

在“网页设计和艺术史”的网页中使用了视差效果来展现这些几何图形。

来源：博客，欢迎分享本文！