WordPress divi主题

如何将动画添加到部分/行

| 4月 26, 2022 | Divi主题使用教程 | 0 条评论

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

曾几何时,在互联网上,为您的网站添加动画是一项繁琐且有些专业的任务。 然而,Divi 拥有强大的动画工具和滚动效果,无需大量技术专长即可实现。 任何人都可以毫不费力地将这些效果添加到他们的网站。 虽然本教程的流程可以应用于 Divi 中的任何元素,但我们今天将重点关注部分和行,以使用它们实现特定效果。 让我们深入了解动画!

google广告开户

预览

桌面

移动的

将 Divi Builder 加载到页面或帖子中

您需要做的第一件事是进入 Divi Builder。 无论您选择我们的布局包之一(我们将在本文中使用网球俱乐部布局包)还是您自己的设计,所有步骤都在 部分 设置。

行

通过这种设计,我们将为 1 节和 3 行设置动画以实现顺序加载效果。

选择预制布局

要应用我们专业设计的布局包之一,请进入 Divi Builder 并选择 使用预制布局. 这将显示我们提供的所有免费赠品的列表。

选择预制布局

选择布局

接下来,只需选择要使用的布局包。 您可以按类别排序或搜索关键字以查看我们为您创建的内容。

divi动画布局

找到要设置动画的部分和行

当布局导入所有资产并加载页面后,您将需要找到要添加动画的部分和行。 记住, 部分 颜色编码 蓝色的 在 Divi Builder 中,以及 绿.

行和节

WordPress divi主题

绘制好之后,让我们开始添加这些动画!

如何将动画添加到部分和行 – 选项 1

将动画添加到 Divi 部分非常简单。 您首先需要输入 部分 设置。 然后,导航到 设计 选项卡并滚动,直到您看到 动画片 选项。

动画选项

在下面 动画片 选项,您将为您选择的动画调整多达 8 个不同的选项。

动画选项

  1. 动画样式 是您选择动画显示方式的地方。 如果该部分会像球一样从页面的一侧滚动或反弹。 最常见的是 褪色滑动.
  2. 方向 – 您将设置元素移动的方向。 一个值 向上 表示该部分将从底部开始并向上移动。 向上 不是原点。
  3. 期间 – 动画从开始到结束持续多长时间。 较低的值会加快速度,而较高的值会减慢速度。
  4. 延迟 – 此选项可防止动画尽快触发,并且比立即触发更能引起人们的注意。
  5. 强度 – 值越低,比动画更流畅,而更高的值更活泼、更具侵略性。
  6. 开始不透明度 – 值 0 将导致动画开始不可见并在持续时间内聚焦。 100 表示该元素甚至在动画开始之前就完全可见。
  7. 速度曲线 – 这将允许您调整动画开始和结束的流畅程度。
  8. 重复 – 你的动画是一次性的效果,还是你想一遍又一遍地循环的东西? 如果动画设置为 一次,页面必须重新加载才能再次启动。

如何将动画添加到部分和行 – 选项 2

Divi 还有一个功能叫做 滚动效果. 这些是当用户将视口滚动到元素时触发的动画。 滚动效果可以设置到任何元素,并且可以与 动画片 我们上面提到的选项。

如何启用滚动效果

同样,Divi 中的任何元素都可以设置为启用滚动效果,但我们今天处理的是节和行。 所以输入你的 部分 设置,导航到 先进的 选项卡,然后找到 滚动效果 标题。

滚动效果

选择效果和触发器

滚动效果 选项,您会发现可以在滚动时触发的不同类型动画的各种选项卡。

滚动效果

fiverr建站WordPress程序员
  • 粘性位置 – 当用户滚动过去时,部分或行是否粘在用户的屏幕上。
  • 变换效果 – 这些是实际的动画效果:水平和垂直移动、淡入/淡出、尺寸缩放、旋转和模糊。
  • 放 [Feature] – 您将能够设置效果在屏幕上最明显的位置以及它发生的时间/地点
  • 运动效果触发器 – 您将确定动画是在元素顶部进入视口、元素中心还是底部时开始。

这些与使用 动画片 上一节中的选项归结为您是否希望动画自动化,或者是否希望它在用户每次执行操作时触发。 您可以使用 Scroll Effects 和 Animation 选项组合动画,我们将在主教程的效果中使用它们。

结合部分和行的动画

您可以通过组合各种动画在不同时间触发来为您的网站创建一些令人惊叹的效果。 通过使用 动画延迟 选项,您的网站可以按顺序对一系列部分、行和元素进行动画处理,以产生一些令人印象深刻的视觉效果。

首先,我们将设置 动画风格 在里面 部分 设置为 滑动动画方向 设置 向上.

向上滑动

我们将保留其余选项的默认值。 特别是 动画延迟. 我们希望 Section 在可见时触发。

独立站选品工具

第 1 行的动画设置

接下来,我们将调整该部分的第一行。 我们进入 设置,进入 动画片 下的选项 设计 选项卡,然后再次选择 滑动. 这一次,我们想改变 方向 到 Down 和 动画延迟 到 500毫秒. 1000ms 等于 1 秒,记住。

动画时长

由于我们将部分时间设置为 0 毫秒以立即触发,因此我们希望行稍微偏移,从而允许初始动画在此动画开始之前大部分完成。

第 2 行的动画设置

接下来,我们将进入页面的第二个设置 然后去 动画片 选项。 再次,我们将选择 滑动 为了 动画风格,这一行将滑向 .

行动画

高质量外链购买

此外,我们将设置 动画延迟1000毫秒,这意味着该动画将在第一个动画结束后立即触发。

第 3 行的动画设置

对于我们正在制作动画的第三行,我们将使用 滚动效果 来实现我们的目标。 因为我们的第三行从首屏开始,所以如果我们像使用其他元素一样简单地使用时间延迟,大多数动画都将看不到。 所以我们要做到这一点,所以情况并非如此。

动画选项

首先,我们将重复上述过程。 只有这一行,我们正在设置 动画风格 褪色。 然后,我们将设置 期间500毫秒 所以这一行在动画过程中出现得更快。 我们会 延迟 它由 1500毫秒 以确保其他动画在此开始之前完全完成。

行的动画延迟

最后,一定要检查 开始不透明度 设定为 0%. 我们希望这一行在准备好被看到之前是不可见的。

JasperAI 10000字免费额度试用

滚动效果设置

这就是事情变得有趣的地方,因为我们可以组合效果。 点击 先进的 行的选项卡并找到 滚动效果. 找出 水平运动 选项卡并确保将其打开。 然后设置 运动效果 扳机元素中间. 我们使用中间而不是顶部来确保效果在用户滚动之前不会开始生效,以防万一用户的视口显示行的顶部。

行设置

使用该设置,该行将等到其他所有内容动画完成后才会出现,然后当用户向其滚动时,整行将显示为从屏幕一侧滑动。

最终结果

完成所有这些后,您的结果应该与此类似。

桌面

移动的

结论

添加动画效果是使您的网站更动态、更有趣和更具视觉吸引力的可靠方法。 使用 Divi 的内置动画和滚动效果工具,您可以创建令人惊叹的组合, 任何碰巧路过的访客。

WordPress备份工具updrafplus

您使用 Divi 动画效果从您的部分和行中创建了什么? 让我们在评论中看到它们!

文章特色图片来自 Vectorchok / shutterstock.com