动画数字计数器作为一种显示数字的方式在网络上很流行。 数据 突出服务、案例研究等的价值。 Divi 有一个专用的数字计数器模块，可用于轻松生成动画数字计数器。
但是，在本教程中，我们将向您展示如何使用 Divi。 使用位置选项和滚动效果 Divi，我们将设计一个简单的布局来显示带有滚动数字的日期。
第1部分：创建标题部分
在第一部分中，我们将为布局创建一个简单的标题。
首先，在该部分中添加一行一列。
然后向该行添加一个新的文本模块。
更新 内容 具有以下元素的文本模块：
保存日期
然后，如下更新标题文本样式：
- Heading 2 Font：Prata
- 第2项文字大小：130像素（台式机），70像素（平板电脑），40像素（手机）
第2部分：使用滚动动画创建计数器
在下一部分中，我们将创建三个计数器，这些计数器将对滚动数字进行动画处理，直到它们停止显示日期（月，日和年）为止。 每个计数器将使用总共5个文本模块和一个分隔符模块构建。 第一个文本模块将用作计数器的标签（即月，日，年）。 接下来的四个文本模块将分别包含一个不同的编号（进行中），该编号将在滚动时使用Divi中的垂直移动偏移量进行动画处理。 较低的分隔模块将帮助隐藏数字溢出。
就是这样
添加第二行
在现有行下方，将另一行添加到列中。
线路设置
在添加模块之前，请按以下方式更新行参数：
- 装订线宽度：1
- 填充：高0像素，低0像素
列参数
然后打开列设置并按如下所示更新填充：
- 填充（桌面）：低100像素
- 填充（平板电脑和手机）：0像素低
添加文本模块
然后将一个文本模块添加到该列。
内容/标签
为 内容 从文本模块中添加单词“month”。
文字设计设置
一旦 内容 添加后，更新设计设置如下：
- 背景颜色：#ffffff
- 文字字型：对话
- 文字大小：40px
- 文本行的高度：2em
- 宽度：100％
- 填充：顶部20像素，底部20像素，左侧20像素，右侧20像素
- 底边框宽度：5px
- 底部边框的颜色：#eeeeee
职务
然后，在高级标签下，如下更新位置选项：
- 职位：相对
- Z索引1
为第一个问题添加文本模块
一旦第一个文本模块到位，我们就可以开始添加将在滚动条上移动的数字。 要添加第一个数字，请在现有的“月”文本模块下添加一个新的文本模块。
添加号码/内容
然后将文本模块标签更新为“ num1”，以方便参考。 然后用数字“ 01”更新内容。
号码的设计设置
在设计选项卡下，更新以下内容：
- 文字字体：Prata
- 文字文字颜色：＃8ab2d3
- 文字文字大小：70px
- 文字字母间距：4px
- 文字行高：1.5em
- 填充：左20像素
注意：这些数字的文本大小为70像素，行高为1.5em，这意味着文本模块的总高度将接近100像素。 每当我们开始添加垂直运动偏移时，请记住这一点很重要。 例如，向文本模块添加垂直偏移量“ 1”将使文本模块精确移动100px，这是文本模块的高度。
第一个数字的滚动效果
将以下滚动效果添加到文本模块。
在“垂直运动”选项卡下，更新以下内容：
- 启用垂直运动：是
- 起始偏移：1（10％时）
- 平均偏移量：0（20％时）
- 终点偏移：-1（在30％时）
在“淡入和淡出”选项卡上，更新以下内容：
- 激活淡入和淡出：是
- 初始不透明度：0％（10％）
- 平均不透明度：100％（20％时）
- 最终不透明度：0％（至30％）
确保将动作效果的触发器设置在剪辑的顶部：
- 运动效果触发器：元素顶部
为第二个数字创建文本模块
复制第一个数字
创建第一个数字后，请对其进行复制以创建第二个数字文本模块。 然后在“图层”视图中更新标签，以备参考。
更新编号/内容
打开第二个数字文本模块的参数，并用数字“ 02”更新内容。
更新位置
然后更新位置选项，如下所示：
- 位置：绝对
- 垂直偏移：126px
更新滚动效果
然后，如下更新滚动效果：
在“垂直运动”选项卡上，更新以下内容：
- 起始偏移：1（20％时）
- 平均偏移量：0（30％时）
- 终点偏移：-1（在40％时）
在“淡入和淡出”选项卡上，更新以下内容：
- 初始不透明度：0％（20％）
- 平均不透明度：100％（30％时）
- 最终不透明度：0％（至40％）
为第三期创建文本模块
复制第二个数字
要为第三个数字创建文本模块，请为第二个数字复制文本模块。
更新编号/内容
用数字“ 03”更新内容。
更新滚动效果
然后更新滚动效果：
在“垂直运动”选项卡上，更新以下内容：
- 起始偏移：1（30％时）
- 平均偏移量：0（40％时）
- 终点偏移：-1（在50％时）
在“淡入和淡出”选项卡上，更新以下内容：
- 初始不透明度：0％（30％）
- 平均不透明度：100％（40％时）
- 最终不透明度：0％（至50％）
为第四期创建文本模块
第三次重复
要为滚动计数器创建第四个数字，请为第三个数字复制文本模块。
更新编号/内容
用数字“ 04”更新内容。
更新滚动效果
然后更新滚动效果：
在“垂直运动”选项卡上，更新以下内容：
- 起始偏移：1（40％时）
- 平均偏移量：0（50％时）
- 终点偏移：0（在60％时）
在“淡入和淡出”选项卡上，更新以下内容：
- 初始不透明度：0％（40％）
- 平均不透明度：100％（50％时）
- 最终不透明度：100％（至60％）
添加下部分隔符
在最后一个文本模块下，添加一个新的分隔符模块。 这将用于隐藏视图中滚动文本的底部溢出。
然后选择否显示分隔符。
样式和位置设置
更新分隔符设计，如下所示：
- 背景颜色：#ffffff
- 宽度：100％
- 高度：100px
- 上边框宽度：5px
在“高级”选项卡上，更新以下内容：
- 停用：手机和平板电脑
- 位置：绝对
- 位置：左下
重要说明：分隔符将占用的空间是通过在列中添加100像素底部填充来创建的。 如果您不添加此填充，则分隔符将与数字重叠。
创建其他柜台和专栏
复制第1列并更新内容
要创建一个新的计数器，请复制第1列。这将创建第二列，所有元素都将自动放置在适当的位置。
然后，您需要做的就是用新的文本和数字更新所有文本模块的内容。
复制第2列并更新内容
在第2列中更新了所有文本模块的内容后，请复制第2列以创建该年份的第三个计数器。 然后根据需要更新每个文本模块的内容。
最终结果
这是最终结果。
其他资源
最后的想法
这个带有滚动动画数字计数器的简单布局应该有助于显示 数据 以全新且独特的方式进行数字化。 随意抛弃日期概念并使用计数器来做任何你能想到的事情！
