WordPress divi主题

如何使用 Divi 滚动效果堆叠和动画文本

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

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

使用 Divi 的滚动效果在滚动上堆叠和动画文本是一种独特的设计技术,可用于为您的页面标题带来活力。 诀窍是使用 Divi 的位置选项绝对堆叠字母,使它们直接位于彼此之上。 然后,您可以使用滚动效果水平和垂直移动字母。

google广告开户

看看这个!

抢先看

下面是我们将在本教程中构建的文本动画的快速浏览。

在divi中滚动堆栈和动画文本

订阅我们的 Youtube 频道

免费下载布局

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

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

让我们进入教程,好吗?

你需要什么开始

扩展角落标签

WordPress divi主题

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

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

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

如何在 Divi 中堆叠和动画文本

设置部分和行

首先,为常规部分创建一个单列行。

在divi中滚动堆栈和动画文本

部分设置

在添加任何模块之前,打开部分设置并更新以下内容:

  • 背景颜色:rgba(201,245,255,0.35)
  • 填充:14vw 顶部,14vw 底部

在divi中滚动堆栈和动画文本

行设置

接下来,打开行设置并更新以下内容:

  • 最大宽度:60%
  • 行对齐:居中
  • 高度:20vw

在divi中滚动堆栈和动画文本

我们将高度设置为指定值,因为我们要将文本模块绝对定位在行内。

添加在 Stroll 上动画的堆叠文本模块

现在已设置部分和行,我们可以开始添加构成标题设计的文本模块。 第一个文本模块将包括主标题文本。 接下来的三个文本模块将包含一个字母,用于堆叠在标题的第一个字母之上,然后在滚动时进行动画处理。

fiverr建站WordPress程序员

让我们从添加带有主标题的文本模块开始。

添加文本模块 #1

向该行添加一个新的文本模块。

在divi中滚动堆栈和动画文本

然后使用以下内容更新文本模块。

<h2><span style="color: rgba(83,144,193,0.1)">D</span>esign</h2>
that jumps off the page

在divi中滚动堆栈和动画文本

独立站选品工具
  • 文字字体:Bungee Hairline
  • 文字字体粗细:粗体
  • 文字文字大小:4vw
  • 文字行高:1.5em
  • 标题 2 字体:Bungee Shade
  • 标题 2 字体粗细:粗体
  • 标题 2 文字颜色:
  • 标题 2 文字大小:12vw
  • 宽度:100%

在divi中滚动堆栈和动画文本

在divi中滚动堆栈和动画文本

添加文本模块 #2

下一个文本模块将用作与标题的第一个字母重叠的第一个字母。 要快速开始文本模块的设计,请复制第一个文本模块。

在divi中滚动堆栈和动画文本

然后使用标题文本的第一个字母 (“D”) 更新重复文本模块的内容。

高质量外链购买

在divi中滚动堆栈和动画文本

然后更新设计设置如下:

  • 文字字体:Bungee Shade
  • 文字字体粗细:粗体
  • 文字文字颜色:rgba(83,144,193,0.3)
  • 文字文字大小:12vw
  • 文本行高:1em

在divi中滚动堆栈和动画文本

滚动效果

带有字母“D”的文本模块现在直接堆叠在第一个文本模块中的字母“D”之上。 我们将使用垂直和水平运动的组合在滚动上稍微移动字母。

垂直运动

在高级选项卡下,选择垂直运动选项卡并更新以下内容:

JasperAI 10000字免费额度试用
  • 启用垂直运动:是
  • 起始偏移量:0(20%)
  • 中间偏移:-0.5(在 40% 和 60% 之间)
  • 结束偏移:0(80%)

在divi中滚动堆栈和动画文本

如果您不熟悉 Divi 中的滚动效果选项,则顶部百分比值表示浏览器窗口中的位置点。 每个百分比值对应于下面的偏移量(开始、中间和结束)。 因此,当用户滚动时,字母“D”将在距离视口底部达到 20% 时开始动画(从“0”开始偏移)。 它将继续动画(向上)直到它从视口底部到达 40%,然后保持在“-0.5”偏移量直到它从视口底部到达 60%。 一旦到达 60% 点,它将开始动画回到原来的“0”偏移量,并在距离视口底部到达 80% 时停止动画。

水平运动

要使文本模块水平运动,请选择水平运动选项卡并更新以下内容(值将与垂直运动相同):

  • 启用水平运动:是
  • 起始偏移量:0(20%)
  • 中间偏移:-0.5(在 40% 和 60% 之间)
  • 结束偏移:0(80%)

在divi中滚动堆栈和动画文本

添加文本模块#3

通过复制前一个文本模块创建第三个文本模块(或字母“D”)。

WordPress备份工具updrafplus

在divi中滚动堆栈和动画文本

更新滚动效果

然后更新以下滚动效果。

垂直运动

在divi中滚动堆栈和动画文本

水平运动

在divi中滚动堆栈和动画文本

更新文本颜色

更新文本颜色如下:

  • 文字文字颜色:rgba(83,144,193,0.5)

在divi中滚动堆栈和动画文本

添加文本模块#4

此时在桌面视图中选择事情可能会变得更加困难。 部署线框视图模式并复制前面的文本模块以创建我们的最终字母。

在divi中滚动堆栈和动画文本

更新文本颜色

更新文本颜色如下:

在divi中滚动堆栈和动画文本

更新滚动效果

然后跳转到高级选项卡,调整滚动效果如下:

垂直运动

在divi中滚动堆栈和动画文本

水平运动

在divi中滚动堆栈和动画文本

为测试部分添加边距

要在实时页面上测试设计,您需要一些滚动空间。 我们可以通过在该部分添加一些顶部和底部边距来轻松做到这一点。 打开部分设置并更新以下内容:

  • 边距:40vw 顶部,40vw 底部

最后结果

现在我们终于可以在实时页面上查看最终结果了。

在divi中滚动堆栈和动画文本

这里是移动端。

在divi中滚动堆栈和动画文本

随意使用 Divi 的查找和替换功能尝试不同的字体。

在divi中滚动堆栈和动画文本

最后的想法

这篇文章应该让你的创意榨汁运行起来,寻找新的方法来为滚动文本设置动画。 这适用于部分标题,因为用户必须滚动浏览部分(从上到下)并体验滚动效果的完整持续时间。

而且,想想看,同样的概念也适用于图像和图标。

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

干杯!

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