网站设计领域的传统思维认为，网站的设计应尽量减少用户滚动的需要，并将最重要的信息保留在网站的第一个屏幕上。 然而，近年来发生了很多变化，如果你仔细想想，我们生活在一个滚动文化中。 Web 用户已经习惯于向下滚动页面来获取更多信息，而搜索引擎更喜欢内容更丰富、会话时间更长的网站，而实现这一目标的更可能的方法之一就是创建独特的体验。 为了吸引访问者滚动，可以提供这种独特体验的就是视差滚动。
什么是视差滚动？
视差滚动是网页设计中使用的一种特殊滚动技术，其中背景图像在整个网页中的移动速度比前景图像慢，从而在二维网站上产生深度错觉。 它是当今网页设计中最常用的设计技术之一，但您甚至可能没有意识到您已经经历过它。 这是您已经习惯的简单操作，它使用户在网站上感觉充满活力和互动。 但是，如果您选择使用此功能，请务必考虑视差也可能会影响移动体验。 为了提高网站速度而不过度影响移动设备的可用性，通常建议减少视差滚动或完全删除它。
请记住首先考虑您可能使用它的所有情况，以及如何适应跨多个设备的用户。 结合视差滚动还可以帮助您实现和解决各种目标，例如：
23个值得学习的网站
由于视差滚动可以通过多种方式使用，因此不乏可以激发您灵感的示例。 视差滚动很容易过度到让人感觉移动太多的程度，但有些网站知道如何正确地做到这一点。 下面的示例就是这样做的，并以一种有意义且增加价值的方式合并了视差滚动。 有些人将这种技术发挥到极致，而另一些人则用它来增加用户体验，而不会产生任何潜在的压倒性影响。
1. 容器
Kontainer 以更微妙的方式使用视差滚动来吸引人们对其软件图像的关注。 这有助于使页面上的半图像、半文本模式更具交互性，使其从网站的全白设计中脱颖而出。
2.日立
与 Kontainer 一样，Hitachi 使用微妙的视差实现来吸引人们对其页面上的版式和较小标题的注意。 这提醒用户花点时间阅读与其关联的图像旁边的文字，从而使他们能够更深入地研究页面上的内容。
3.Flixxo
Flixxo 不仅通过动画和 3D 图形，还通过每个部分中文本的移动，使他们的网站变得栩栩如生。 由于背景从一个区域到下一个区域具有如此无缝的效果，视差文本有助于告知用户每个区域的位置。
4.克丽玛
在整个 Crema 网站中，滚动到英雄后会立即触发一些视差背景颜色变化效果。 这有助于指示分段内容并帮助访问者知道何时将显示新内容。
5.伊甸园耶鲁
EdenYale 已将视差滚动应用于其网站页面上的每个设计形状。 这些有意的元素有助于保持他们想要与品牌保持一致的设计美学。 一种颜色和缓慢的背景移动也让页面看起来有更多内容，让他们想要滚动。
6.建设未来
Ativa 的会议“Building the Future”旨在重新利用会议信息视差，将会议标题垂直放置在页面上。 一旦用户弄清楚，这将帮助用户确定他们需要滚动多长时间才能不仅到达会议名称的末尾，而且到达页面内容的末尾。 当您移动鼠标时，虚线背景也会急剧移动，如果您还没有使用该网站具有的大胆颜色进行绘画，则可以提供一些互动乐趣。
7.库珀·帕金斯
Cooper Perkins 可能是一个小网站视差滚动网站设计软件，但这并不能阻止他们将视差应用到他们的网站上。 在几个页面上，他们使用大型英雄图形，在滚动后“显示”下面页面的其余部分。 整个图像拼贴中的少数统计数据也使用了视差，这有助于它们脱颖而出。
8.联盟加
AlliancePlus 是一个很好的例子，说明非图片摄影对于员工和客户绘图的重要性。 它使用视差滚动将特定图像向下滚动页面，最终停止在下一部分。 这让用户想要继续关注他们以了解最终结果。 我们在网站上最喜欢的视差用例是他们的推荐，通过在工作页面上滚动鼠标来控制。
9.米彩
作为一个财富管理平台，由于金融产品带来的敏感性，米财需要与用户之间真正建立信任。 该公司使用视差滚动背景图像和软件图像来帮助为产品和使用它的人带来活力。 这使产品人性化并有助于建立信任。
10. 中心
当您滚动浏览 Centros 网站时，页面会通过缩放和增强这些部分来引导您了解自行车的许多功能，以便您确切地知道是什么让这辆自行车像使用视差所描述的那样令人惊叹。
11. 斯特迪
电子数据交换 (EDI) 听起来可能不是最性感的概念，但 Stedi 以其复杂且丰富多彩的图像和图形使其软件和公司看起来令人惊叹。 某些图形，例如热气球或飞机，可以很好地与视差滚动配合，使它们能够像在现实世界中一样移动。
12. TEDx 贝塞斯达
TEDx Bethesda 是关于远见卓识的思考和想象超出正常或“超越苍白”的事物。 为了塑造这个主题，他们将内容和其他图像放置在主页上的外部空间/虚线图案的顶部。 最重要的是，这些图像和文本甚至会根据您在页面上移动鼠标的位置而轻微移动。
13.卡纳塔尔
卡纳塔尔的主页分为几个编号部分，有助于解释使该公司独一无二的一些关键组成部分。 当您滚动浏览网站时，与其相关的部分和图像会滚动或进入视图。 这些部分的引人入胜的性质也让人感觉卡纳塔尔真的想庆祝他们强调的三个领域。
14. 洛朗·佩里尔
罗兰百悦网站上的几乎每个图像和文本区域都具有非常轻微的视差效果。 由于场景的微妙性，我发现视差滚动的巧妙运用让人想起酒杯握在手中时的轻微移动。
15. 短语5
La Phrase 5 的网站主要由更小、更具几何形状和圆圈组成，其中包含文本和图像。 每个部分都以不同的速度移动，在此过程中相互重叠。 这种风格让人想起您在印刷设计中看到的更常见的风格，并且可以很好地裁剪网站的某些部分。
16.斯考利诺
Scrollino® 被描述为“一种可以连续读取可打印社论或书籍内容的创新设备”。 虽然有视频展示如何使用产品，但页面上还有其他由用户操作触发的产品动画。 滚动。
17.CodeQ
与代码的其余部分一样，CodeQ 确实喜欢使用视差滚动来定位图像，就好像它们漂浮在旁边的静态内容之外一样。 他们还可以创造性地在作品集页面上使用视差，在滚动时显示彼此分离的图像层，从而显示深度。
18. 癌症研究基金会
癌症研究基金会为其组织应用了一个充满活力且丰富多彩的品牌，这与他们希望科学家探索的“大胆”治疗方法相一致。 他们的设计结合了该网站的科学主题，结合了研究笔记和分子化合物的小草图，这些草图以更快的速度在网站内容的上方或下方滚动。
19. 联合银行
UBank 在其主页上使用视差滚动来显示您在使用其应用程序时可能遇到的各种类型的界面。 当您输入新的部分以及每个部分中的子部分时，图像将根据突出显示的内容而变化。 感觉就像您正在参观产品的使用方式。
20.新传媒
NeaMedia 是一家致力于为各种不同目的创作 3D 雕塑和雕像的公司。 所以他们站起来炫耀自己的作品和细节才有意义。 除此之外，NeaMedia 在所有图像上使用视差来增强人们对他们所做的令人难以置信的工作的关注。
21.NooFlow
NooFlow 坚信他们的产品将成为提高您绩效的解决方案，并且知道他们的网站需要代表这一点。 为此，NooFlow 根据您要访问的页面对产品、成分或药丸的图像进行视差处理。
22.Packwire
Packwire 提供各种尺寸的盒子，因此您可以根据自己的需求打造完美的盒子。 主页在英雄区域中提供了一些选项视差滚动网站设计软件，并在您滚动到其他地方时以动画方式显示有关每个框的名称及其提供的功能的描述性文本。
23. 网络流
您是否曾经想过回到过去并提醒（或了解）网络曾经是什么样子以及它已经走了多远？ WebFlow 就是您网站的最佳选择。 它们带您了解网络的历史，当您接近页面底部时，视差会转变为现代设计的各种元素。
总结
作为南京网站建设公司，视差滚动无疑会给用户体验带来各种优势，如果执行得当，甚至可以帮助您更好地获得一些网站营销效果。 然而，该技术也不适合所有人。 根据您的目标受众，您的用户可能会发现该效果过于分散注意力甚至烦人，因此您应该在内测版中测试该效果并在进行 UI 更改之前获得反馈。
