在 WordPress 上使用滚动视差效果

在 WordPress 上使用滚动视差效果

随着时间的推移,即使是最时尚的网站也会开始感觉有点过时。理想的平衡是保持事物在视觉上的趣味性,而不是避免彻底的重新设计。

使用视差效果可以增加网站的美感。它可以帮助你的视觉元素脱颖而出,同时也分解了基于文本的内容。你甚至可能会注意到,访客停留在你的网站上的时间更长,因为增加了参与度。

在本篇文章中,我们将讨论什么是视差效果,以及在你的网站上添加视差效果时要记住的一些事情。然后,我们将带领您了解如何使用插件或不使用插件来添加这个现代特性。

什么是视差效应?

视差效应(或视差滚动)是当用户滚动浏览网页时,背景移动速度慢于前景的内容。这种速度对比会产生深度和运动的错觉。

网页设计人员通常将这种效果用于主页、着陆页或任何可能被拆分的部分的地方。它可以在一页的网站上特别有益,因为新奇可以鼓励用户继续滚动浏览内容。

视差效果,或滚动视差,是当用户滚动网页时,背景移动速度慢于前景内容。这种速度上的对比创造了一种深度和移动的错觉。

网页设计师经常在主页、登陆页或任何可以分割部分的地方使用这种效果。这在单页网站上尤其有益,因为这种新奇感可以鼓励用户不断滚动内容。

添加视差效果时的考虑

视差滚动可以为你的 WordPress 站点添加很多内容,但如果处理不当,它会影响用户体验 (UX)。毫无疑问,可访问性会受到这个功能的影响,因为它会使阅读变得困难。

当创建一个视差效果时,你需要仔细选择你的背景图像。应该选择和前景色颜色相差幅度大的背景图片,否则可能会降低文字内容的可读性。

如何将视差效应添加到您的 WordPress 站点

即使你的主题没有滚动视差效果,你也可以自己把它添加到你的网站上。我们将向您展示如何使用插件或不使用插件来实现这一点,并分解这两种方法的步骤。

使用 WordPress 视差插件

使用插件添加视差滚动非常简单。您将安装一个插件,配置您的设置,然后您就完成了所有的设置。让我们更详细地运行这些步骤。

1. 下载 WordPress 滚动视差插件

有一些插件可以添加视差滚动,但我们建议使用高级 WordPress 背景(AWB)。这是一个免费的 WordPress 视差插件,可以让你使用图片或视频作为背景:

2. 选择图像

在这里,导航到你想要出现视差效果的帖子或页面。AWB 有它自己的块,你可以用它来选择你的图像,并在页面上定位效果:

在 WordPress 中上传图片

在 Block 菜单中,从媒体库中选择你想用作背景的图像或视频。如果图像不适合应用程序,也可以使用纯色作为背景。

3. 启用视差和选择视差类型

当您在 Block 菜单中时,您将找到效果行为的选项:

选择滚动时触发的效果

在这里,你可以选择让背景图像的比例和不透明度随着用户滚动而改变,而不是更传统的视差效果。这样你就可以更好地控制效果如何显示在你的网站上。

最后,您可以选择关闭移动设备的视差选项,因为移动设备的导航倾向于滑动,而不是滚动 (更不用说对页面加载速度的潜在影响)。

使用 CSS 向 WordPress 添加滚动视差效果

如果你不想使用插件,你可以使用 CSS 添加视差。您将上载您的背景图像,然后添加一点代码到您的网站。

1. 将图像上传到您的 WordPress 媒体库

从 WordPress 仪表盘,上传一张要作为背景的图片。

上传图片后,通过从 WordPress 仪表板导航到媒体 > 库,将其定位在媒体库中。找到图像后,单击图像并在打开的窗口中查找文件 URL:

复制图像文件的 URL

2. 将 HTML 添加到页面、帖子中

接下来,您将添加以下 HTML 到您想要出现视差效果的页面或帖子中。如果您正在使用块编辑器,则可以使用自定义 HTML 块添加此代码。然而,这也可以放置在文本编辑器的经典编辑器用户:

<div class="parallax">
    <div class="parallax-content">
        Your content here
    </div>
</div>

您需要将 "此处的内容" 占位符文本替换为任何您希望的内容并保存您的工作。

但是,您在前端看不到太多,因为我们还有一步 - 将级联样式表 (CSS) 代码添加到您的主题中。

3. 将 CSS 添加到您的主题中

最后,您将使用主题编辑器或内置 CSS 编辑器将一些自定义 CSS 添加到主题中。

在主题中添加以下 CSS,将背景图像 URL 替换为您之前复制的 URL:

.parallax { 

background-image: url("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");

height: 100%;

background-attachment: fixed;

background-position: center;

background-repeat: no-repeat;

background-size: cover;

margin-left:-410px;

margin-right:-410px;

}

.parallax-content {

width:50%;

margin:0 auto;

color:#FFF;

padding-top:50px;

}

将以上代码添加后记得保存文件,然后查看前端效果是否生效。