如何使用 Divi 设计滚动动画条形计数器

条形计数器在整个网络中使用，以通过代表特定值的微妙颜色动画有效地说明数据或指标。 Divi 有一个专用的酒吧柜台模块，可用于轻松生成动画酒吧柜台。 它们是关于页面、服务页面和案例研究的流行补充

大多数酒吧柜台在进入视野时似乎都会有动画效果，并且很难定制。 但是，在本教程中，我们将向您展示如何使用 Divi 创建完全可自定义的条形计数器（从头开始），在滚动时设置动画。 为此，我们将利用 Divi 的位置选项和滚动效果，并以独特的精确方式使用它们。

让我们开始吧。

抢先看

这是我们将在本教程中构建的酒吧柜台的快速浏览。

免费下载布局

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

下载文件

免费下载

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

下载

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

要将布局导入您的页面，只需提取 zip 文件并从 Divi 库导入 JSON 文件。

让我们进入教程，好吗？

你需要什么开始

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

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

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

第 1 部分：优化节、行和列

添加行

T0 开始，向该部分添加两列行。

部分设置

然后打开部分设置并添加背景颜色如下：

• 背景颜色：#000545

然后给该部分一些临时边距来测试滚动效果和一些填充，如下所示：

• 边距：80vh 顶部，80vh 底部
• 填充 10vw 顶部，10vw 底部

行宽

接下来，打开行设置并添加以下宽度：

• 宽度：90%
• 最大宽度：700px

列溢出

确保隐藏行内两列的溢出。 为此，请打开每一列的设置并更新以下内容：

• 水平溢出：隐藏
• 垂直溢出：隐藏

第 2 部分：创建具有滚动效果的条形计数器

条形计数器将由三个元素组成：条形背景（分隔模块）、颜色条（也是分隔模块）和条形内容（模糊模块）。 彩色条元素将使用水平运动滚动效果偏移进行动画处理。

让我们从酒吧背景开始。

创建条形背景

添加分频器模块

向第 1 列添加一个新的分隔模块。

分隔线设置

显示分隔线：否

• 背景颜色：rgba(255,255,255,0.1)

• 宽度：300px
• 高度：70px

创建吧台吧台

复制分频器模块

要为酒吧柜台创建彩色条，请复制我们用于制作条背景的先前分隔模块。

分隔线背景

然后使用新的渐变背景色更新背景，如下所示：

• 渐变背景左颜色：#fe7e1f
• 渐变背景右颜色：#ffbc48
• 梯度方向：90度

分隔线位置

为了使彩色条位于条背景上方，我们需要给它一个 Z 索引为 1 的绝对位置：

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

分隔线滚动效果

现在我们准备将动作添加到酒吧柜台栏。 为此，我们将使用水平滚动效果，将分隔模块从左向右移动。 由于列溢出是隐藏的，我们将看不到栏，因为它超出了列的左侧。 但是当它向右移动时，我们会看到它进入我们的视野。

使用偏移值确定条形计数器的百分比值

在将水平运动添加到分隔线/条之前，我们需要了解如何确定要在条形计数器上显示的百分比值。 换句话说，如果我们想在条形计数器上表示 25%，我们需要知道什么水平运动偏移会将条形向右移动条形背景宽度的 25%。

我们可以做一些简单的数学计算来解决这个问题。

条形的总宽度为 300 像素。

每个水平偏移值都是相对于 100px 的（1 等于 100px，-2 等于 -200px，等等……）

要将条向左移动（在视图之外），我们需要添加 -3 (-300px) 的起始偏移量。 这会将它移到左侧 300px 之外。

然后我们需要将栏移动超过 300px（即 75px）的 25% 以完成滚动动画。

当条到达页面的垂直中心时，要将条向右移动超过 75 像素，我们需要将中间偏移设为 -2.25（因为 -300 加 75 等于 -225）。 这可能让你想起我们在小学使用的那些数轴。

水平运动显示 25%

要使用水平运动显示 25%，请选择水平运动选项卡并更新以下内容：

• 启用水平运动：是
• 起始偏移：-3
• 中间偏移：-2.25
• 结束偏移：-2.25

创建吧台内容

为了创建条形内容，我们将使用一个模糊模块。 Blurbs 允许我们轻松添加左对齐图标以及标题和正文，这将非常适合酒吧柜台。

在彩色条形分隔模块下，添加一个模糊模块。

模糊内容

然后更新内容如下：

• 标题：25%
• 身体：优化
• 图标：见截图

模糊设计

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

• 图标颜色：#ffffff
• 图像/图标放置：左
• 使用图标字体大小：是
• 图标字体大小：40px

• 文字颜色：浅
• 正文字体：魔方
• 正文字体样式：TT
• 正文字母间距：0.2em
• 车身线高：1em

• 内容宽度：100%
• 宽度：300px
• 高度：70px
• 填充：顶部 15 像素，左侧 15 像素

• 位置：绝对
• Z指数：2

第 3 部分：创建额外的条形计数器

在下一部分中，我们将继续使用相同的技术制作更多条形计数器。 我们将创建一个 50%、75% 和 100% 的酒吧柜台来完善布局的设计。 这应该会给你很好的工作示例，让你自己做更多。

创建一个 50% 的条形计数器

带条形计数器的重复列

在第 1 列中创建第一个吧台后，我们可以复制整个列或将组成吧台的三个模块复制并粘贴到第 2 列中。现在您应该有两列，每列都有相同的吧台。

更新条形分隔线设置

背景

在第 2 列内，打开彩色条分隔设置并更新渐变背景颜色：

• 渐变背景左颜色：#4c75f8
• 渐变背景右颜色：#57a1ff

滚动效果

然后更新水平运动滚动效果，使其在滚动时填充栏的 50%：

• 中间偏移：-1.5
• 结束偏移：-1.5

更新模糊内容

然后打开第 2 列中的模糊设置并更新内容：

• 标题：50%
• 图标：见截图

创建一个 75% 的条形计数器

复制行

要快速启动我们接下来的两个酒吧柜台的设计，请复制整行以在其下方创建另一个相同的行。

更新栏背景和滚动效果

打开彩色条形分隔模块的设置并更新以下背景颜色：

• 渐变背景左颜色：#4c75f8
• 渐变背景右颜色：#57a1ff

然后更新水平运动偏移如下：

• 中间偏移：-.075
• 结束偏移：-0.75

模糊内容

打开blurb设置并更新内容如下：

• 标题：75%
• 图标：见截图

创建 100% 条形计数器

更新条形颜色和滚动效果

要创建 100% 条形计数器，请转到第 2 列并更新彩色条形分隔模块的背景颜色，如下所示：

• 渐变背景左颜色：#f449b4
• 渐变背景右颜色：#fc845b

然后更新水平运动偏移如下：

• 中间偏移：0
• 结束偏移：0

更新模糊内容

最后，更新简介内容：

• 标题：100%
• 图标：见截图

最后结果

这是最终结果的屏幕截图。 我从我们的第五个主题构建器包中添加了一个自定义背景图像作为最后的润色。

现在滚动的动作是什么。

最后的想法

希望这些滚动动画条形计数器能在未来的项目中派上用场。 拥有这种自定义设计的缺点是您必须做一些数学运算来计算将彩色条移动到特定百分比的距离。 但好处是你有更多机会进行更独特和更有创意的设计。

如果您有兴趣，请查看我们关于创建滚动动画的自定义圆形计数器的帖子。

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

干杯!