Divi 网站英雄部分的 4 个动画滚动按钮（以及如何创建它们）
已发表: 2019-08-08动画滚动按钮有一个简单而重要的工作，即吸引用户的注意力并引导他们进入您的网页。 这些类型的按钮通常位于首屏，因此访问者只需单击按钮即可，而无需滚动到网页的下一个重要部分。 实际上，Divi 在全角标题模块中内置了此滚动按钮功能。
在本教程中，我将向您展示如何在 Divi 中创建完全自定义的动画滚动按钮。 因此，如果您正在全角标题模块中寻找 Divi 内置滚动按钮的创意替代方案，这些动画滚动按钮设计将帮助您指明正确的方向（字面意思）。
抢先看
以下是我们将一起构建的设计的快速浏览。
免费下载动画滚动按钮布局
要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
免费下载
加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。
您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！
订阅我们的 YouTube 频道
要将布局导入您的页面，只需提取 zip 文件并将 json 文件拖到 Divi Builder 中。
让我们进入教程好吗？
你需要什么开始
首先，您需要具备以下条件：
- 已安装并激活 Divi 主题
- 在前端从头开始构建的新页面（可视化构建器）
- 用于模拟内容的图像
之后，您将有一个空白画布开始在 Divi 中进行设计。
构建标题部分
在我们开始设计动画滚动按钮之前，我们需要设置我们的模拟标题部分。 由于我们将更加专注于获得动画滚动按钮设计，因此我们将使用深色背景保持标题设计简单。 完成后，我们可以复制该部分来处理每个新的滚动按钮设计。
首先，创建一个具有一列行的常规部分。
然后在添加模块之前，打开部分设置并添加深色背景，如下所示：
背景颜色：#222222
任何深色背景都可以。
添加标题文本
要创建模拟标题文本，请将新文本模块添加到一列行。
然后使用位于默认段落文本上方的 h1 标题更新正文内容。
<h1>scroll button animation</h1> <p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
然后更新设计设置如下：
文字字体：Karla
文本 文本对齐：居中
标题文字大小：5vw
文字颜色：浅
这将是我们将用于不同动画滚动按钮的基本部分设计。
动画滚动按钮设计 #1：带有慢速弹跳动画的垂直文本
有了我们的基本部分设计，我们准备添加我们的第一个动画滚动按钮。 这个滚动按钮由一个模糊模块组成，右侧有一个图标。 然后文本和图标将垂直旋转，使箭头图标指向下方。 之后，我们将添加具有缓慢持续时间的反弹动画。
这是如何做到的。
首先，在包含标题文本的行下方添加一个新的单列行。
然后向该行添加一个模糊模块。
在模糊设置下，删除默认正文内容并添加以下内容：
标题：滚动
使用图标：是
图标：右箭头（见截图）
然后更新设计设置如下：
图标颜色：#ffffff
图像/图标放置：左
使用图标字体大小：是
图标字体大小：50px
标题字体样式：TT
标题文字颜色：#ffffff
标题文字大小：14px
标题字母间距：3px
标题行高：50px（与图标字体大小相同）
接下来，我们需要给我们的模糊设置一个宽度并垂直旋转它，如下所示：
宽度：132px
模块对齐：居中
Transform 旋转 Z 轴：90 度
现在我们需要做的就是反转宣传语的内容顺序，使箭头图标位于宣传语的右侧而不是左侧。 这将使箭头按预期显示在垂直文本下方。 为此，我们需要将以下自定义 CSS 添加到主元素：
direction: rtl;
添加慢脉冲动画
要添加动画，请更新以下内容：
动画风格：弹跳
动画方向：下
动画持续时间：5000ms
动画延迟：400ms
图像/图标动画：从左到右
最后结果
现在让我们看看设计#1 的最终结果。
动画滚动按钮设计 #2：垂直选框文本动画
下一个设计建立在设计#1 的基础上，我们将保留使用模糊模块创建的垂直文本滚动按钮。 不同之处在于动画。 对于这个设计，我们将添加一个幻灯片动画，从滚动按钮隐藏在行容器上方开始，然后以按钮隐藏在行下方结束。 随着动画循环播放，这将创建一个吸引用户眼球的文本选取框动画效果。
这是如何做到的。
首先复制设计#1 的整个部分。
更新第 2 行设置
接下来，更新包含模糊模块/滚动按钮的部分行，如下所示：
水平溢出：隐藏
垂直溢出：隐藏
更新模糊模块设置
为了创建选取框动画，首先我们需要使用变换翻译来移动行容器下方的模糊文本（从视图中隐藏）。 这将是文本在动画结束时的位置。 更新以下内容：
变换平移 Y 轴：115px
接下来，添加以下动画设置：
动画风格：幻灯片
动画方向：下
动画持续时间：4000ms
动画强度：195%
动画开始不透明度：100%
动画速度曲线：线性
动画重复：循环
最后结果
现在让我们看看设计#3 的最终结果。
动画滚动按钮设计 #3：带有延迟向下滑动动画的箭头选项卡
对于下一个设计，我们将结合一个文本模块和一个模糊模块来创建一个独特的箭头标签设计。
对于此设计，我们将从基本的标题部分设计开始。 因此，您可以复制重复的设计 #3 部分，然后删除第 2 行中的模糊模块。
然后将文本模块添加到第一行正下方的一列行。
然后用“滚动”一词更新正文内容。
然后更新设计设置如下：
背景颜色：#ffffff
文字文字颜色：#222222
文本对齐：居中
宽度：50px
模块对齐：居中
边距：0px 底部
填充：顶部 20 像素，底部 20 像素
圆角 左下角 5px，右下角 5px
添加模糊图标
现在文本模块已经就位，我们需要在其正下方创建模糊图标以完成箭头选项卡设计。 为此，在文本模块下添加一个新的模糊模块。
然后删除默认标题和正文。 然后添加更新以下内容：
使用图标：是
图标：底部箭头三角形（见截图）
然后按如下方式更新设置：
图标颜色：#ffffff
边距：-36px 顶部，0px 底部
这个负边距会将箭头附加到文本模块，以获得漂亮的箭头标签设计。
然后将以下css添加到模糊图像中以去除图标下方的一些不必要的边距。
模糊图像 CSS：
margin-bottom: 0px;
第 2 行设置和动画
由于我们想为构成滚动按钮设计的两个模块添加相同的动画，我们需要将动画添加到包含它们的行。 更新该行的设置，如下所示：
最大宽度：100px
填充：0px 顶部，0px 底部
动画风格：幻灯片
动画方向：下
动画持续时间：1200ms
第 1 行背景颜色和框阴影
此设计的最后一步涉及向滚动按钮行正上方的第一行添加背景颜色。 并且通过更新该行的 Z 索引，我们将允许滚动按钮动画看起来好像它是通过标题突破的。
打开第 1 行的设置，如下所示：
背景颜色：#222222
Z 指数：10
盒子阴影：见截图
框阴影垂直位置：80px
框阴影模糊强度：22px
框阴影扩散强度：-70px
阴影颜色：#222222（确保它与背景颜色匹配）
最后结果
现在看看最终的结果。
动画滚动按钮设计 #4：鼠标滚动动画
对于最后一个动画滚动按钮，我们将通过组合文本模块和模糊模块来创建鼠标滚动动画。
这是如何做到的。
首先，您可以使用基本标题部分。 然后在第 1 行下添加一个新行。
添加模糊模块
接下来，向该行添加一个模糊模块。 然后删除默认的标题和正文。
之后，更新图标如下：
使用图标：是
图标：圆形（见截图）
然后更新简介设计设置如下：
图标颜色：#ffffff
使用图标字体大小：是
图标字体大小：15px
动画风格：幻灯片
动画方向：下
动画持续时间：1200ms
动画重复：循环
图像/图标动画：无动画
然后将以下自定义 CSS 添加到 Blurb 图像：
margin-bottom: 0px;
添加文本模块
接下来，直接在模糊模块下添加一个新的文本模块。 然后用“滚动”一词更新正文文本。
然后更新以下文本设置：
文字文字颜色：#ffffff
文本对齐：居中
宽度：90px
边距：顶部 10 像素，左侧 -30 像素
更新第 2 行设置
现在更新行设置如下：
宽度：30px
高度：60px
圆角：16px
边框宽度：1px
边框颜色：#ffffff
边框样式：纯色
水平溢出：可见
垂直溢出：可见
最终结果
现在让我们看看最终的结果：
添加锚链接功能
锚链接是那些跳转到页面不同部分的链接。 它们通常用于一页网站。 我们可以使用相同的概念为我们的滚动按钮添加一个锚链接，以便它们从页面跳到所需的部分。 要将锚链接功能添加到动画滚动按钮，您需要做两件主要的事情。
- 您需要在要跳转到的部分或行中添加 CSS ID
- 您需要将具有相同 CSS ID 的锚链接添加到您的滚动按钮
这是如何工作的。 首先，在包含滚动按钮的标题部分下创建一个新部分。 然后在高级选项卡下为新部分提供一个 CSS ID。
然后找到您想要变成锚链接的元素/滚动按钮，并添加一个以主题标签（或井号）开头的 url，紧接着是您要跳转到的元素的 CSS ID。
例如，如果该部分的 CSS ID 是“section-2”，那么您将添加“#section-2”作为链接 URL。
请记住，Divi 允许您向 Divi 中的每个元素添加链接 URL，因此可以随意添加指向包含动画滚动按钮的整行的链接。
有关更多信息，请查看您可以使用锚链接做的一些很酷的事情。
发挥创意！
不要害怕组合不同的模块并以不同的方式为它们制作动画。 事实上，当我探索使用 Divi 设计滚动按钮的新方法时，我创建了一个有趣的拇指滚动动画，可用于移动设备。 我已将其包含在上面的免费下载中，以防您想查看。
最后的想法
像这样的动画滚动按钮很容易用 Divi 构建。 如果您将它们视为锚链接，它们可以在比标题更多的地方使用。 我希望这些设计能激发您为下一个项目创建一些全新的滚动按钮。
我期待在评论中收到您的来信。
干杯!