什么是视差滚动? 简而言之,这是一种在用户向下滚动您的网站时通过使背景图像比前景图像移动得更慢来创建深度错觉的方法(我们将更详细地解释这一点并向您展示一个示例)。
视差效果是使您的网页更加动态和有趣的一种方式。 他们抓住您的访客的注意力,并鼓励他们关心您要说的话。 这种效果看起来既时尚又专业,但使用正确的工具却很容易实现。
在这篇文章中,我们将回答这个问题:“什么是视差滚动?” 然后我们将讨论它何时有用并向您展示如何将其添加到您的 WordPress 网站。 让我们来看看!
什么是视差滚动?
大多数网页都足够长,可以同时包含“首屏”和“首屏”内容。 换句话说,您可以向下滚动以查看其他内容。 在大多数情况下,向下滚动网页是一个静态的事情,就像你的眼睛向下扫描物理页面一样。
然而,设计师已经开始尝试使这种必要的滚动更加动态的方法。 这就是视差效果出现的地方。 如果您仍然想知道“什么是视差滚动?”,请查看以下示例:
注意背景中的建筑物如何比前面的文字移动得更慢。
您可能已经在多个网站上看到过这种效果。 它已成为一种非常流行的技术。
总而言之,视差滚动是指页面上的背景和前景图像以不同的速率移动,从而产生一种虚幻(但引人注目)的 3D 效果。 它可以以多种方式应用,并为希望设计引人注目的页面的任何人提供许多好处。
为什么要在您的网站上使用视差滚动?
毫无疑问,视差滚动看起来非常吸引人。 但是,如果您需要比“看起来很酷”更强有力的论据,以下是为您自己的网站添加视差滚动效果的一些原因:
- 它使您的页面感觉动态和互动,增强访问者与您网站的互动。
- 各个部分的定义更加清晰,有助于以易于理解的方式组织您的页面。
- 您可以使用此效果特别注意页面上的特定元素——关键信息、主要行动号召 (CTA) 等。
当然,就像任何高级网页设计功能一样,视差滚动是一种最好谨慎使用的效果,并不是每个人都喜欢视差。 在大多数情况下,您不想将其应用于整个网站,因为它可能会让访问者感到不知所措或迷失方向。
相反,这种技术最好用在单个关键页面上,通常是主页或登录页面。 如果所讨论的页面很长,这是一个特别强大的选择,因为较短的页面不会从效果中受益。
还值得注意的是,视差滚动特别适合单页网站。 单页网站往往很长,有多个部分,并且从上到下有明显的进展。
视差滚动已成为增强此类网站设计和清晰度的首选方法。 如果您正在寻找建立一个单页网站,那么您肯定会考虑这一点。
如何将视差滚动添加到您的 WordPress 网站?
既然我们已经弄清楚了什么是视差滚动并且您了解了它的好处,您可能会渴望在自己的网站上实现它。 同时,它是一个可能有点吓人的设计元素,因为它看起来相当先进。
从头开始编写视差效果需要大量工作。 但是,这种技术非常流行,因此有很多选项可以轻松地将其添加到您的网站——尤其是如果您是 WordPress 用户。
视差 WordPress 插件
有一些 WordPress 插件可帮助您创建视差效果,例如 Advanced WordPress Backgrounds:
如果您已经建立了一个网站并且想要添加视差效果,那么这种插件可以完成工作。
视差 WordPress 主题
如果您正在创建一个新站点(或愿意对现有站点进行一些更改),更好的选择是选择包含内置视差滚动功能的主题。 这样,您将能够更好地将效果与网站设计的其余部分相结合。
在当前环境下,很容易找到提供此功能的主题。 例如,查看我们自己的 Neve 主题:
这是一个轻量级但高度可定制的主题,与您喜欢的所有页面构建器兼容。 它还包括大量可供选择的演示内容,其中一些会立即将我们自己对视差滚动的看法添加到您的网站。
安装并激活主题后,您可以前往 外观 > Neve 选项 访问演示内容:
点击 查看演示然后打 预习 在每个单独的选项上查看它的实际效果。 例如,这是主页上的平滑滚动效果:
选择 进口 会将演示及其所有相关内容和插件添加到您的网站(包括 Elementor Page Builder)。 然后就可以打开 家 页面并选择 使用 Elementor 进行编辑 开始进行自己的调整:
通过替换文本和图像,但保持布局不变,您可以快速创建具有独特效果的自定义页面。
其他一些 Neve 演示以及许多其他 WordPress 主题也是如此。 因此,请随意尝试,直到找到适合您网站的样式和布局。
结论
什么是视差滚动? 至此,您应该已经有了答案。 该效果会导致网页的背景和前景元素以不同的速率移动,从而在 2D 屏幕上创建深度外观。
视差滚动有助于页面上的各个部分脱颖而出,并提供有趣的视觉对比和强调。 这种效果最适合用于长主页和登录页面,特别适合单页网站。 幸运的是,许多 WordPress 主题使实现视差效果变得轻而易举——包括 Neve。
您对如何使用视差滚动在您自己的网站上发挥最佳效果有任何疑问吗? 在下面的评论部分询问!