WordPress divi主题

如何使用 Divi 的滚动效果设计动画时钟

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

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

网络上到处都是需要与时间相关的设计重点(速度优化、即将发生的事件等)的网站。 在大多数情况下,时钟图标或图形可以很好地工作。 但是,创建动画时钟设计肯定会给您的网站设计带来独特的“旋转”。

google广告开户

借助 Divi 中可用的所有内置设计选项,我们可以从头开始创建出色的动画时钟设计。 在本教程中,我们将创建一个动画时钟,当用户向下滚动页面时,它会转动时钟的指针。

让我们开始吧!

抢先看

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

免费下载动画时钟布局

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

要将部分布局导入 Divi 库,请导航到 Divi 库。

单击导入按钮。

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

然后单击导入按钮。

迪维通知框

WordPress divi主题

完成后,部分布局将在 Divi Builder 中可用。

让我们进入教程,好吗?

你需要什么开始

扩展角落标签

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

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

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

第 1 部分:设计钟面

首先,在常规部分添加一列行。

divi 动画时钟滚动效果

行设置

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

  • 背景颜色:#003a5c

divi 动画时钟滚动效果

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

fiverr建站WordPress程序员
  • 天沟宽度:1
  • 宽度:50vw
  • 最大宽度:500px
  • 高度:50vw
  • 最大高度:500px

divi 动画时钟滚动效果

  • 圆角:50%
  • 边框宽度:15px
  • 边框颜色:#ffffff

divi 动画时钟滚动效果

  • 盒子阴影:见截图
  • 盒子阴影垂直位置:0px
  • 盒子阴影模糊强度:68px
  • 阴影颜色:rgba(0,0,0,0.22)

divi 动画时钟滚动效果

在高级选项卡下,更新可见性选项,如下所示:

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

divi 动画时钟滚动效果

独立站选品工具

第 2 部分:添加小时标记

一旦将行设计为钟面,我们就可以添加代表十二个 0’clock、三个 0’clock、六个 0’clock 和九个 0’clock 的时标。 每个标记都将使用分隔模块创建。

12 点钟标记

首先在行内添加一个新的分隔符模块。

divi 动画时钟滚动效果

然后更新背景颜色如下:

  • 背景颜色:#78acf4

divi 动画时钟滚动效果

高质量外链购买
  • 宽度:10vw
  • 最大宽度:150px
  • 高度:3px
  • 圆角:8px
  • 变换旋转Z轴:90度

divi 动画时钟滚动效果

在高级选项卡下,给分隔线一个绝对位置:

  • 职位:绝对
  • 位置:顶部中心

divi 动画时钟滚动效果

6点钟标记

要创建 3 点钟标记,请复制用于创建 12 点钟标记的分频器。 (此时最好在“层”模式中标记您的模块。)然后打开复制分隔器并更新位置位置,如下所示:

divi 动画时钟滚动效果

JasperAI 10000字免费额度试用

3 点钟标记

要创建 3 点钟标记,请复制 6 点钟标记。 然后打开新副本的设置(确保将其标记为“3 点钟”)并更改以下内容:

divi 动画时钟滚动效果

然后按如下方式更新转换选项:

在翻译选项卡下…

  • 变换平移 X 轴:50%

在旋转选项卡下

WordPress备份工具updrafplus
  • 变换旋转Z轴:0度

divi 动画时钟滚动效果

9点钟标记

要创建 3 点钟标记,请复制 6 点钟标记。 然后打开新副本的设置(确保将其标记为“9 点钟”)并更改以下内容:

divi 动画时钟滚动效果

然后按如下方式更新转换选项:

在翻译选项卡下…

  • 变换平移 X 轴:-50%

divi 动画时钟滚动效果

第 3 部分:创建时钟指针(秒、分和小时)

一旦小时标记到位,我们就可以开始创建时钟指针了。 我们将从秒针开始。

二手

要创建秒针,请复制 12 点钟的分隔线,并使用“层”模式将其拖到列中其他分隔线的下方。

然后将新的副本标记为“第二个”。

打开模块的设置并更新高级选项卡下的位置:

divi 动画时钟滚动效果

在设计选项卡下,按如下方式更新尺寸:

  • 宽度:20vw
  • 最大宽度:200px
  • 高度:0.5vw
  • 最大高度:7.5px

divi 动画时钟滚动效果

现在秒针位于钟面的中间,但我们希望秒针的底部像普通时钟指针一样从中心开始。 然后我们希望手的底部保持在中心作为旋转原点,这样手就可以像在实际时钟上一样旋转。 为此,我们需要使用转换选项的组合从特定的转换原点定位和旋转分隔线。

更新以下内容:

在翻译选项卡下…

  • Transform Translate X Axis:0%(这是重要的一步)

在旋转选项卡下…

  • 变换旋转Z轴:-90度

在“原点”选项卡下…

  • 变换原点:左中心

divi 动画时钟滚动效果

因为一旦我们添加了滚动效果,这只手会移动得非常快,让我们给它一个半透明的背景颜色,这样它就不会太分散注意力。

  • 背景颜色:rgba(175,175,175,0.12)

divi 动画时钟滚动效果

分针

要创建分针,请复制秒针模块并标记复制的“分钟”。 然后打开新的分隔模块并更新背景颜色:

  • 背景渐变左颜色:#78acf4
  • 背景渐变正确颜色:#b0b9ff
  • 渐变方向:90度

divi 动画时钟滚动效果

然后更新设计如下:

  • 宽度:15w
  • 最大宽度:150px
  • 高度:1vw
  • 最大高度:15px

divi 动画时钟滚动效果

时针

分针完成后,复制秒针模块并标记复制的“小时”。 然后打开新的divider模块,更新背景颜色如下:

  • 背景颜色:#ffffff

divi 动画时钟滚动效果

然后更新设计选项卡下的尺寸如下:

  • 宽度:10vw
  • 最大宽度:100px

divi 动画时钟滚动效果

此时,您将为滚动效果准备好所有三个时钟指针!

divi 动画时钟滚动效果

第 4 部分:为每个时钟指针添加旋转滚动效果

为了旋转时钟指针,我们将为三个时钟指针添加旋转滚动效果。 由于我们正在使用时钟设计,重要的是要记住我们可以使用每个时钟指针上的旋转度数来表示实际时间。 例如,将时针旋转 30 度表示 1 点钟,60 度表示 2 点钟,以此类推。

时针旋转滚动效果

首先,我们将为时针添加旋转滚动效果。 打开时针分隔设置,添加如下变换效果:

在旋转选项卡下…

  • 启用旋转:是
  • 起始旋转:0度(10%)
  • 中间旋转:15 度(在 50% 时)
  • 结束旋转:30度(90%)

divi 动画时钟滚动效果

分针旋转滚动效果

接下来,我们将为分针添加旋转滚动效果。 打开分针分度器设置,添加如下变换效果:

在旋转选项卡下…

  • 启用旋转:是
  • 起始旋转:0度(10%)
  • 中间旋转:180度(50%)
  • 结束旋转:360 度(90%)

divi 动画时钟滚动效果

秒针旋转滚动效果

接下来,我们将为秒针添加旋转滚动效果。 打开秒针分频器设置并添加以下变换效果:

在旋转选项卡下…

  • 启用旋转:是
  • 起始旋转:0度(10%)
  • 中间旋转:5400度(50%)
  • 结束旋转: 10800deg (at 90%)

divi 动画时钟滚动效果

注意:要使秒针精确旋转 1 小时,需要旋转 21600 度。 但由于这太快了,我认为最好把它减半。 毕竟,这是出于设计目的。

最终结果

这是最终的设计。

divi 动画时钟滚动效果

这是滚动效果的最终结果。 请注意向下滚动页面时时间是如何恰好经过一小时的。

最后的想法

我们可以用滚动效果如此精确地表示时间,这真是太神奇了。 随意尝试添加更多旋转滚动效果,以在滚动时加快和减慢时钟的时间。 此外,您可以使用这种时钟设计来强调大量 CTA 或标题。

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

干杯!

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