如何在 Divi 中的滚动上设计带有背景动画的文本蒙版

使用 Divi 的内置选项创建文本掩码设计非常容易。 构建器具有创建文本蒙版效果的所有成分，包括文本样式、背景和混合模式的选项。 事实上，我们之前已经使用混合模式创建了文本蒙版设计。 但是，通过滚动效果，我们可以将文本蒙版设计提升到一个全新的水平。

在本教程中，我们将向您展示如何在 Divi 中设计带有滚动背景动画的文本蒙版。 设计独特，滚动效果确实让它变得生动起来。

让我们开始吧！

抢先看

这是我们将在本教程中构建的设计的快速浏览。

免费下载布局

要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

要将部分布局导入您的 Divi 库，请导航到 Divi 库。

单击导入按钮。

在可移植性弹出窗口中，选择导入选项卡并从您的计算机中选择下载文件。

然后点击导入按钮。

完成后，分区布局将在 Divi Builder 中可用。

让我们进入教程，好吗？

你需要什么开始

首先，您需要执行以下操作：

1. 如果您还没有安装并激活 Divi 主题。
2. 在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
3. 选择“从头开始构建”选项。

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

在 Divi 中设计带有背景动画的文本遮罩

添加行

首先，在默认的常规部分添加一个两列的行。

更新部分设置

在添加任何模块之前，打开部分设置并更新背景颜色和填充如下：

• 背景颜色：#750046

• 填充：0px 顶部，0px 底部

更新行设置

部分设置完成后，打开行的设置并更新以下设计设置：

• 天沟宽度：1
• 宽度：100%
• 最大宽度：100%
• 填充：0px 顶部，0px 底部

将装订线宽度设置为 1 并将宽度设置为 100% 很重要，因为我们将在创建文本蒙版设计时为我们的文本使用 vw 长度单位。 由于 vw 长度单位基于浏览器的宽度，因此父容器（部分和行）具有与浏览器相同的 100% 宽度非常重要。

更新第 1 列设置

我们的文本掩码和图像将被添加到左列（第 1 列）。 我们需要为列添加背景颜色，以便我们添加到图像和文本的混合模式将混合/显示该颜色。 我们还需要将溢出设置为隐藏，以便在滚动图像时设置动画，我们不会在列外看到溢出的图像。

打开第 1 列的设置并更新以下内容：

• 背景颜色：#750046
• 水平溢出：隐藏
• 垂直溢出：隐藏

创建文本掩码

要创建文本掩码，请将文本模块添加到第 1 列。

文字内容

然后在正文内容中添加单词“divi”。 我们使用了一个 4 个字母的单词，以便它可以在方形设计中均匀堆叠。

文字背景

接下来，为文本模块添加白色背景色。

• 背景颜色：#ffffff

文字设计

然后，在设计选项卡下，更新以下内容：

• 文字字体：Rubik Mono One
• 文字字体样式：TT
• 文字文字颜色：#000000
• 文字文字大小：25vw（桌面），50vw（平板电脑和手机）
• 文本行高：0.8em
• 文本对齐：居中

• 填充物：8vw 顶部，8vw 底部

文本混合模式

要完成文本蒙版设计，请添加以下混合模式：

• 混合模式：屏幕

到目前为止，此文本蒙版效果的四个关键要素如下：

1. 列背景
2. 白色文本背景
3. 黑色文本
4. 文本模块上的屏幕混合模式

屏幕混合模式将图层相乘并产生更轻的混合版本。 在屏幕混合模式下，黑色文本变得完全透明，显示其背后的内容，在这种情况下是背景色。

添加背景图片

要将背景图像添加到文本蒙版，请创建一个新的图像模块并上传大约 1700 像素 x 2500 像素的图像。 图像的大小很重要，这样图像将覆盖列的高度和宽度。

形象设计

然后更新以下设计设置：

• 强制全角：是
• 混合模式：屏幕

这种混合模式对于文本遮罩效果不是必需的，但它确实将图像与背景颜色混合，以便更好地匹配设计。

图像位置

接下来，给图像一个绝对位置并更新 Z 索引，使其位于文本模块的后面。

• 位置：绝对
• Z 指数：-1

图像滚动效果

图像设计准备就绪后，转到高级选项卡并更新滚动效果选项，如下所示：

在垂直运动选项卡下，

• 起始偏移：-1（0%）
• 中间偏移：0（50%）
• 结束偏移：1（100%）

在水平运动选项卡下，

• 起始偏移：-0.5（0%）
• 中间偏移：0（50%）
• 结束偏移：0.5（100%）

在放大和缩小选项卡下，

• 起始比例：110%（0%）
• 中档：125%（50%）
• 结束比例：140%（100%）

结果

您可以为该部分添加一些顶部和底部边距，以便您可以检查到目前为止的结果。

创建模拟文本

在右栏中，添加一个新的文本模块。

使用以下内容更新正文内容：

<h2>Lorem Ipsum Dolor Sit Amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

然后更新文字设计设置广告如下：

• 文字颜色：浅
• 标题 2 字体：Rubik
• 标题 2 文字大小：4vw
• 填充（桌面）：16vw 顶部，5vw 左，5vw 右
• 填充（平板电脑）：16vw 顶部，16vw 底部，5vw 左，5vw 右

结果

可选调整

黑色背景/白色文本

如果您想为文本蒙版使用黑色背景，您需要做的就是更新构成文本蒙版效果的三个关键选项。

打开文本模块设置并更改以下内容：

• 背景颜色：#000000（黑色）
• 文字文字颜色：#ffffff（白色）
• 混合模式：相乘

这是结果……

旋转 PNG 图像

您可以将动画图像更改为具有透明背景（PNG）的动画图像，以获得另一种很酷的效果。 这是我使用的 PNG 图像示例，并添加了旋转滚动效果。

最终结果

这是对所有设计的另一种看法。

最后的想法

希望这些带有滚动背景动画的文本蒙版设计能够为您的网站提供所需的创意优势。 一旦您了解了创建文本遮罩效果的基本要素，您就可以轻松创建无数版本的此设计来满足您的需求。

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

干杯!