网页设计中的视差滚动 - 概念
现在我们已经了解了视差的起源和背景,让我们了解网页设计中视差滚动的历史和概念。
定义
根据维基百科 - 视差滚动 是计算机图形学中的一种技术,其中背景图像比前景图像更慢地经过相机,在 2D 场景中产生深度错觉并增加虚拟体验的沉浸感。
视差滚动在动画的早期就已使用。许多动画工作室(如迪士尼)使用多平面相机来实现视差效果。
随着计算机图形技术以及 JavaScript 等尖端框架的发展,网页设计师和开发人员现在可以构建具有丰富体验的网站。虽然视差滚动从几个层开始,但它通过计算机中的滚动条进入了下一个级别。技术保持不变,但由于其应用于滚动,创造了独特的体验。
示例
视差滚动在现代网站中得到广泛使用。由于视差滚动可以一次性实现在移动设备和桌面网站上,因此近年来此类网站的受欢迎程度飙升。
下面给出了一些采用视差滚动的网站示例 −
贝尔·格里尔斯
随着动画的进行,您将能够看到网站内容如何进行交互。随着您向前滚动,会显示越来越多的信息。
让您的钱变得重要
为了向读者介绍信用合作社的好处,本网站将带您了解一个故事情节。随着您向前滚动,信息会以独特的方式显示出来。
InfoQuest 信息图
使用滚动体验描绘了员工在工作场所查找关键信息的旅程。
GitHub 404
这与通常的视差体验略有不同,当您将鼠标指针悬停在屏幕顶部的对象上时,该对象会移动。
视差滚动的应用
到目前为止,从定义和背景中应该可以清楚地看出,视差滚动在各种数字媒体中都很有用。视差滚动的一些应用如下 −
游戏设计
视差滚动在游戏设计中被广泛使用。角色需要相对于背景移动,并且玩家使用鼠标和键盘进行控制,整个体验需要改变。游戏设计是使用视差滚动的非常原始但又流行的方式。
网站
为了让用户专注于网站,一些动态和不同的体验很重要。正如您可能从上面讨论的网站示例中注意到的那样,视差滚动因其以交互方式呈现而增加了内容。