在 Divi 中使用视差的终极指南

已发表: 2017-07-25

试图为视差找到合适尺寸的图像可能有点令人沮丧。该图像作为标准背景图像看起来可能很棒，但是一旦您选择“使用视差效果”，图像就会被放大，看起来什么都不对。为避免日后出现这种情况，您需要了解视差是什么以及将图像置于视差模式时会发生什么。

今天，我将深入研究视差与 Divi 的工作方式。我会准确地解释当你使用两种不同的视差方法时会发生什么，什么尺寸的图像最好，我什至会加入一些自定义的 css 技巧来按照你想要的方式定位你的图像。

我们走吧。

什么是视差？

在网页设计方面，视差是一个术语，用于描述使用一种二维动画提供逼真的距离和运动感知的效果。这是通过改变网页上不同元素的滚动速度来实现的，以在查看固定点时产生距离错觉。该技术在网络以外的地方已经存在一段时间了。还记得超级马里奥兄弟吗？如果您曾在 80 年代玩过电子游戏（Nintendo NES），那么大多数游戏都使用这种技术仅使用 2d 图像来给人一种运动的印象。最前面的项目比背景中的树/山/云移动得更快。从而创造出更逼真的运动。

这种效果很像 Divi 中的 True Parallax 方法。除了运动是垂直的而不是水平的。

了解视差如何与 Divi 配合使用

使用 Divi，Parallax 非常容易部署在任何部分、行、列或模块中的任何背景图像上。您所要做的就是将视差效果选项设置为“是”，然后选择您的视差方法（CSS 或真实视差）。

CSS 方法

CSS 方法是您可以为视差效果选择的两种方法之一。您可以通过在您的网站上测试此方法来猜测发生了什么。它被称为 CSS 方法，因为它只使用 CSS 来创建效果。此方法使用 CSS 将背景图像固定到位，同时页面上的其他元素正常滚动。这给人的印象是内容在背景图像前面移动。

真实视差法

第二种方法称为真视差。它被称为“真实”可能是因为它体现了视差效应的传统观念。此方法使用 CSS 和 JavaScript 创建比页面上其他元素稍慢的滚动运动。这是一种更栩栩如生的运动表现，因为它在背景中缓慢移动的图像与前部快速移动的元素之间产生了距离感。

在 Divi 中启用视差会发生什么？

如果您不了解幕后发生的事情，这可能会令人沮丧。因此，当视差被激活时，准确地知道图像发生了什么是有帮助的。

选择 CSS 方法时会发生什么？

选择CSS视差时，将在一个新DIV中包装图像，其中包含跨越浏览器窗口的全尺寸的绝对位置。以下是在 Divi 中执行此操作的 CSS 类和代码片段：

.et_parallax_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}
/*** This sets the image to fixed when using the CSS method ***/
.et_pb_section_parallax .et_pb_parallax_css, .et_pb_slides .et_parallax_bg.et_pb_parallax_css {
    background-attachment: fixed;
}

由于背景大小设置为“覆盖”，高度和宽度为 100%，因此图像将始终“覆盖”其容器的每个部分。在这种情况下，容器是浏览器窗口。这意味着图像的一部分将隐藏在其他内容部分的后面，因为背景图像将始终随着浏览器窗口大小而不断扩大和收缩。

想象一下，这是添加到页面顶部的标题模块的常规背景图像。

图像的纵横比是正确的（1920×1080），并且在 1366×766 的屏幕尺寸上观看时，图像的大小很好地覆盖并适合该部分，没有任何重叠。图片下方的白色区域是页面上的其余内容。

现在这就是当您为图像选择视差时会发生的情况。

如您所见，图像在垂直方向（到达浏览器窗口的底部）和水平方向（以保持图像的纵横比）展开。黑色方块代表您的显示器，因此黑色方块内的所有内容都是观看者所看到的。我将底部的白色内容部分设为半透明，以便您可以看到背景图像隐藏在它后面的位置。当您滚动时图像保持固定，其他元素在图像前面上下移动。

选择真视差法时会发生什么？

如果您设置了 True Parallax，图像将被包裹在一个具有相同 CSS 类的新 div 中：

.et_parallax_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

但是，通过使用一点 JavaScript，图像的高度和位置是根据浏览器窗口的大小和向下滚动页面时动态设置的。动态添加到背景图像的两个值是 height 属性的 px 值和 transform 属性的 translate 值。 height 属性值决定了图像的高度，而 transform 属性 translate 值决定了图像在页面上根据 x 和 y 轴的精确定位。

这是插入到我的视差背景图像的图像标签中的代码，我的浏览器窗口为 1366×766：

    height: 960.8px;
    transform: translate(0px, 220.5px);

注意 transform 属性中的两个数字。这两个数字控制背景图像的定位。第一个数字 (0px) 沿 x 轴（水平）定位图像。由于它设置为 0px，图像不会被移动。第二个数字沿 y 轴（垂直）定位图像。由于它当前是 220.5px，这意味着图像被向下推到页面 220.5px。

还要注意高度值 (960.8px) 比我的浏览器窗口的高度 (766px) 高约 200px。这是为了适应被推送到浏览器窗口底部 220.5 像素的图像。

选择真实的视差方法时，您可能已经注意到您的图像甚至超过CSS方法才会被击打。这是因为图像的位置被拉伸了浏览器高度的 30%。

还记得我们常规的背景图吗？

以下是选择 True Parallax 后图像发生的情况（当然是在开始滚动之前）：

如您所见，图像被拉到浏览器窗口底部的上方。这个浏览器窗口大约为 1080×700，所以它相当小，但我想向您展示在较小的桌面窗口上发生了什么。

为什么真正的视差会拉伸图像这么远？

好吧，我最好的猜测是适应更大的屏幕尺寸。一旦浏览器窗口达到 1920×1080 的屏幕尺寸，背景图像就不再超出窗口底部，并且非常适合。

为什么 True Parallax 使用 JavaScript？

True Parallax 需要 JavaScript 的主要原因是背景图像在滚动时需要以与其他元素不同的速度移动。还记得马里奥兄弟吗？

使用 True Parallax，如果我增加浏览器的大小，高度值也会通过 JavaScript 动态增加，确保我的图像对于浏览器来说总是足够大。

如果我向下滚动页面，平移位置值（上例中的 220.5px）会增加，从而将图像的垂直（y 轴）位置向下移动到页面上。

如果我向上滚动，平移位置值会减小，将图像拉回页面。但是因为滚动时图像以与其他元素不同的速度被推下和拉起，所以你会得到真正的视差效果。

我应该使用什么样的图像？

如果您希望在您的网站上使用视差效果，选择正确的背景图像至关重要。您不希望背景太杂乱或分散注意力。但另一方面，您也不希望它成为无聊的旁注。

以下是为视差选择正确图像类型的 5 个一般提示

避免分散照片的注意力。 内容过多的图像会造成混乱并分散对内容的注意力。
确保您的照片与您网站的主题相匹配。 您的网站应该讲述一个故事。此视差图像（与您的其他图像一样）应符合主题。
保持大而简单。 请记住，您的视差图像也将在较小的屏幕尺寸上查看。确保照片的细节不会太小，以至于在较小的设备上无法识别。
必要时添加叠加颜色。 有时，一个好的视差图像会同时具有深色和浅色两个方面，这可能最终会在滚动时隐藏您的文本。添加深色或浅色叠加层将确保您的文本可以在图像的任何位置阅读
让它变得有趣。 有很多方法可以拍摄照片来解决无聊的事情。花点时间找到一个能吸引观众并吸引他们注意力的作品。

您应该使用什么尺寸的视差背景图像？

这个回答有点棘手。没有一种尺寸适合所有视差图像。事实上，在网页设计中没有一种尺寸适合所有的东西，至少在响应式设计出现之后是这样。但是，即使我可能无法给你一个严格的规则，我可以提供一些通用的指导方针，用 Divi 选择合适尺寸的视差背景图像。

由于最流行的屏幕尺寸约为 1366×766，我肯定会确保所有背景视差图像至少是这个尺寸。但由于大显示器的流行，我会选择更大的尺寸，如 1920×1080。这将确保用户在较大的桌面上看到高质量的图像。

拥有尺寸为 1920×1080 的图像的问题在于，您很少会有高度为 1080 像素的可见部分。因此，您可以在那些隐藏的图像底部存钱。

使视差背景图像看起来正确的有用提示

对于标题和顶部部分

确保您的图像完全可见且看起来很棒的最简单方法是使用全宽标题模块。这样无论屏幕大小如何，您的背景图像总是看起来很棒。但是，如果您使用 Fullwidth Header Module 使用视差背景图像，则可能需要在模块的顶部和底部添加一些填充以显示更多图像。您可以使用 Visual Builder 来完成此操作。转到标题模块设置。在高级选项卡下，在主要元素文本框中输入以下内容：

Padding: 250px 0 250px;

这应该让你朝着正确的方向前进。

如果您仍然没有足够的图像显示，我建议您裁剪图像的顶部，然后再次上传。这可能会有所帮助。

此外，尽量选择图像底部内容不重要的照片，顶部内容更重要的照片。对于标题，您应该只看到视差图像的顶部 700 像素。

对于常规/中间部分

确保在内容周围留出足够的空间以充分暴露背景，以便在该部分到达用户的中心视点时可以获得完整的图片。充分利用填充物。如果您打算使用视差，请不要让您的用户感到困惑，而必须上下滚动才能查看图像。最好第一次展示给他们看。

对于底部部分/页脚

如果您使用 CSS 方法，您可以期望看到更多背景图像的底部（取决于您有多少空间）。我会尝试裁剪照片的底部以显示这些部分的更多顶部。

如果您使用 True Parallax 方法，您将主要看到图像的顶部，因此我会将它们视为您的标题。

以下是页面顶部、中部和底部的 True Parallax 背景图像示例。

这种类型的桥梁图像效果很好，因为它在侧面有一个很好的焦点，并且图像的底部没有顶部那么重要，因此用户永远不会丢失信息。

这是使用 CSS 方法的相同页面。您可以真正看到背景图像是固定的并扩展到浏览器窗口的事实。它甚至看起来像是一直固定在背景中的相同图像。

如果您在搜索完完美的图像、添加必要的填充并对其进行裁剪后仍然不满意，您可以随时求助于一些黑客攻击。

视差图像黑客：使用自定义 CSS 更改图像的位置

如果想改变视差背景的位置，可以使用css选择器“.et_parallax_bg”。这是为视差效果定位图像的默认 css。

.et_parallax_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

如果您注意到，默认情况下，css 视差方法的背景位置属性如下设置为“顶部中心”。但是如果我想改变背景图像的原始位置，你可以调整 background-position 属性值。

如果您想将自定义 CSS 压缩到某个图像，并且不影响所有视差背景，则需要向您的部分添加一个类，以便我们可以在 css 中确定需要自定义的背景。

转到“高级”选项卡下的部分设置，然后输入一个名为“parahacks”的 CSS 类。
现在转到页面设置并选择高级选项卡。

然后使用自定义 CSS 框输入以下任何自定义 CSS 示例：

如果使用 CSS 方法，您可以通过添加以下自定义 css 使背景图像垂直居中：

.parahacks .et_parallax_bg {
    Background-position: center center !important;
}

要使背景图像底部对齐，请添加以下自定义 css：

.parahacks .et_parallax_bg {
    background-position: bottom center !important;
}

要使背景图像向上移动一定数量的像素，请添加以下自定义 css：

.parahacks .et_parallax_bg {
    background-position: center -150px !important;
}

如果使用 True Parallax 方法，则必须考虑隐藏在底部的图像的额外 220 像素（或多或少取决于您的浏览器高度）。要使背景图像更垂直居中，您需要使用负像素值调整 background-position 属性，如下所示：

.parahacks .et_parallax_bg {
    background-position: center -100px !important;
}

要使背景图像更底部对齐，请添加以下自定义 css：

.parahacks .et_parallax_bg {
    background-position: center -220px !important;
}

特尔；博士？这是主要要点的视频摘要

订阅我们的 YouTube 频道

在结束

我真诚地希望本指南有助于深入了解视差如何与 Divi 一起工作。值得庆幸的是，Divi 在为我们提供视差功能方面几乎完成了所有繁重的工作。 CSS 方法和 True Parallax 方法都可以创建开箱即用的逼真效果。但是，我们有责任找到正确的图像并对其进行适当调整，以使它们适用于我们的网站。去吧！我打赌你会创造出惊人的东西。

期待在评论中收到您的来信。

干杯!