网页设计中的视差滚动 - 概念


现在我们已经了解了视差的起源和背景,让我们了解视差滚动在网页设计中的历史和概念。

定义

根据维基百科的说法,视差滚动是计算机图形学中的一种技术,其中背景图像比前景图像更慢地移过相机,在 2D 场景中创建深度错觉,并增加虚拟体验中的沉浸感。

视差滚动在动画的早期被采用。许多动画工作室(如迪士尼)使用多平面相机来实现视差效果。

随着计算机图形技术与 JavaScript 等尖端框架一起发展,网页设计师和开发人员现在可以构建具有丰富经验的网站。尽管视差滚动是从几层开始的,但随着计算机中的滚动条,视差滚动又进入了一个新的水平。该技术保持不变,但由于其对滚动的应用,创造了独特的体验。

例子

视差滚动广泛应用于现代网站中。由于视差滚动可以同时在移动设备和桌面网站上实现,因此近年来此类网站的受欢迎程度猛增。

下面给出了一些采用视差滚动的网站示例 -

贝尔·格里尔斯

贝尔·格里尔斯

随着动画的进行,您将能够看到网站内容如何进行交互。当您向前滚动时,将会显示越来越多的信息。

让你的钱变得重要

让你的钱变得重要

为了向读者介绍信用合作社的好处,该网站将向您介绍一个故事Plotly。当您向前滚动时,信息会以独特的方式显示。

InfoQuest 信息图

InfoQuest 信息图

使用滚动体验描述了员工在工作场所查找关键信息的旅程。

GitHub 404

GitHub 404

这与通常的视差体验有点不同,当您将鼠标指针悬停在屏幕顶部的对象时,该对象会移动。

视差滚动的应用

到目前为止,从定义和背景中应该可以清楚地看出视差滚动在各种数字媒体中都很有用。一些应用程序是视差滚动如下 -

游戏设计

视差滚动广泛应用于游戏设计中。角色需要相对于背景移动,并且随着玩家使用鼠标和键盘的控制,整个体验需要改变。游戏设计是使用视差滚动的非常原始但时尚的方式。

网站

为了让用户牢牢抓住网站,一些动态和不同的体验很重要。正如您可能从上面讨论的网站示例中注意到的,视差滚动因其以交互方式表示而添加到内容中。