WordPress divi主题

如何使用 Divi 的滚动效果为视差背景图像设置动画

| 5月 6, 2022 | Divi主题使用教程 | 0 条评论

5分钟生成10篇英文软文article forge软件试用

将滚动效果与视差背景图像相结合可以为您的访问者创造一个非常神奇的设计。 由于视差效果已经在用户向下滚动页面时使图像处于运动状态,因此添加额外的滚动效果(如水平运动和旋转)可以真正使设计与众不同,并为更具创意的布局打开大门。

google广告开户

在本教程中,我们将介绍如何使用 Divi 的滚动效果为视差背景图像设置动画。 我们将在多个文本模块上使用相同的背景图像来设计一个独特的布局来显示一小段文本。

让我们开始吧。

抢先看

滚动上的动画视差背景图像

免费下载动画视差背景图像布局

要掌握本教程的布局,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

要将布局导入您的页面,只需提取 zip 文件并将 JSON 文件拖到 Divi Builder 中。

让我们进入教程,好吗?

你需要什么开始

扩展角落标签

要开始,您需要执行以下操作:

  1. 如果您还没有,请安装并激活 Divi 主题。
  2. 在 WordPress 中创建一个新页面,并使用 Divi Builder 在前端(可视化构建器)编辑页面。
  3. 选择“从头开始构建”选项。

之后,您将有一个空白画布开始在 Divi 中进行设计。

WordPress divi主题

使用 Divi 的滚动效果创建动画视差背景图像

添加列

首先,创建一个单列行。

滚动上的动画视差背景图像

创建文本模块

然后在列中添加一个文本模块。

滚动上的动画视差背景图像

文字内容

在正文内容中添加字母“p”。

滚动上的动画视差背景图像

将视差背景图像添加到文本模块

接下来,在文本模块中添加视差背景图像,如下所示:

  • 背景图片:插入图片
  • 使用视差效果:是
  • 视差方法:CSS

滚动上的动画视差背景图像

设计文本

在设计选项卡下,更新以下内容:

  • 文字字体:蒙特塞拉特
  • 文字字体样式:TT
  • 文字文字颜色:#ffffff
  • 文字文字大小:100px(桌面),70px(手机)
  • 文字字母间距:5px(电话)
  • 文本行高:1em
  • 文字对齐:居中
  • 内边距:顶部 250 像素,底部 250 像素

填充是创建显示视差背景图像所需的必要高度的原因。

fiverr建站WordPress程序员

滚动上的动画视差背景图像

行设置

现在我们的文本模块已经完成,打开行设置并更新以下内容:

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 宽度:100%

滚动上的动画视差背景图像

第 1 列设置

然后单击以打开列设置。

滚动上的动画视差背景图像

独立站选品工具

在高级选项卡下,更新以下滚动效果:

在水平运动效果选项卡下…

  • 启用水平:是
  • 起始偏移:-2(在 0% 视口)
  • 中偏移:0(40%-60%)
  • 结束偏移:-2(100%)

在旋转效果选项卡下…

  • 启用旋转:是
  • 起始旋转:20 度(在 0% 视口)
  • 中间旋转:0度(40%-60%)
  • 结束旋转:-20 度(100% 时)

滚动上的动画视差背景图像

创建第 2 列

尽管我们从一列布局开始,但我们将创建总共 5 列。 复制列及其所有内容和设置以创建设计所需的下四个更容易。

高质量外链购买

复制整个第一列(带有文本模块)以创建第二列。

滚动上的动画视差背景图像

更新第 2 列滚动效果

然后更新第 2 列的滚动效果,如下所示:

在旋转效果选项卡下…

  • 起始旋转:-20度
  • 结束旋转:20度

滚动上的动画视差背景图像

JasperAI 10000字免费额度试用

创建第 3 列

要创建第 3 列,请复制第 2 列。

滚动上的动画视差背景图像

更新第 3 列滚动效果

然后按如下方式更新第 3 列设置:

在水平运动效果选项卡下…

  • 启用水平运动:否

在旋转效果选项卡下…

WordPress备份工具updrafplus
  • 起始旋转:20度
  • 结束旋转:10度

滚动上的动画视差背景图像

创建第 4 列

要创建第 4 列,请复制第 2 列,然后将其拖到底部。

滚动上的动画视差背景图像

更新第 4 列滚动效果

然后打开第 4 列的设置并更新以下内容:

在水平运动效果选项卡下…

  • 起始偏移量:2
  • 结束偏移:2

在旋转效果选项卡下…

  • 起始旋转:-15度
  • 结束旋转:20度

滚动上的动画视差背景图像

创建第 5 列

最后,要创建第 5 列,请复制第 4 列。

滚动上的动画视差背景图像

更新第 5 列滚动效果

然后按如下方式更新第 5 列设置:

在旋转效果选项卡下…

  • 起始旋转:15度
  • 结束旋转:-15deg

滚动上的动画视差背景图像

更新文本模块字母

接下来,使用内联文本选项更改每列中的字母,以便它们共同拼写单词“power”。

滚动上的动画视差背景图像

更新中间文本模块设计

打开第 3 列中的文本模块设置并更新以下内容:

  • 文字字体:Montserrat Subrayada
  • 文字文字颜色:#e0e722
  • 文字文字大小:150px(桌面)
  • 文字行高:100px

滚动上的动画视差背景图像

更新移动设备的第一个文本模块内容

为了在移动设备上显示单个文本模块,我们需要在平板电脑和手机显示屏上使用以下内容更新第 1 列中的文本模块:

平板电脑和手机上的正文内容:

<p>po<span style="color: #edf000; font-family: 'Montserrat Subrayada';">w</span>er</p>

滚动上的动画视差背景图像

更新第 1 列设置

接下来,打开第 1 列的设置并更新以下内容:

  • 圆角(桌面):100% 左上角
  • 圆角(平板电脑和手机):左上角 40%,右下角 40%

滚动上的动画视差背景图像

在高级选项卡下,将以下自定义 CSS 添加到主元素的平板电脑显示中:

width: 100% !important;

这将确保该列跨越平板电脑和手机显示屏上的行的整个宽度。

滚动上的动画视差背景图像

隐藏平板电脑和手机显示屏上的其余列

现在第 1 列将跨越平板电脑和手机上的行的整个宽度,我们可以隐藏/禁用平板电脑和手机上的其余列。 为此,请打开第 2-5 列的设置并禁用手机和平板电脑上每个列的可见性。

滚动上的动画视差背景图像

更新第 5 列设置

然后打开第5列设置,添加一个互补的圆角如下:

  • 圆角(桌面):100% 右下角

滚动上的动画视差背景图像

将背景设计添加到部分

要完成设计,请使用背景设计更新部分设置,如下所示:

  • 背景颜色:#e0e722

滚动上的动画视差背景图像

  • 顶部分隔线样式:见截图
  • 顶部分隔线颜色:#222222
  • 顶部分隔线高度:650px(桌面),500px(平板电脑和手机)

滚动上的动画视差背景图像

  • 底部分隔线样式:见截图
  • 底部分隔线颜色:#222222
  • 底部分隔线高度:500px(桌面),400px(平板电脑和手机)

滚动上的动画视差背景图像

最后结果

Hre 是桌面上的最终设计。

滚动上的动画视差背景图像

这是平板电脑和手机显示屏的后备设计。

滚动上的动画视差背景图像

滚动上的动画视差背景图像

最后的想法

视差背景图像以真正神奇的方式与滚动效果相结合。 使用视差背景图像的唯一缺点是缺乏对移动设备的支持,但通过 Divi 提供的响应设置,我们可以轻松创建回退。 我希望这个优雅的设计能为您的一天增添一些灵感。

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

干杯!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题