如何使用 Divi 創建滾動動畫數字計數器

動畫數字計數器作為一種顯示數字數據以突出服務、案例研究等價值的手段，在整個網絡中都很流行。 Divi 有一個專用的數字計數器模塊，可用於輕鬆生成動畫數字計數器。

但是，在本教程中，我們將向您展示如何使用 Divi 創建滾動動畫的數字計數器。 使用 Divi 的位置選項和滾動效果，我們將設計一個簡單的佈局來顯示帶有滾動數字的日期。

一探究竟！

搶先看

這是我們將在 Divi 中設計的滾動動畫計數器的快速瀏覽。

免費下載佈局

要了解本教程中的設計，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

要將佈局導入您的頁面，只需提取 zip 文件並將 JSON 文件拖到 Divi Builder 中。

讓我們進入教程，好嗎？

你需要什麼開始

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

1. 如果您還沒有安裝並激活 Divi 主題。
2. 在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
3. 選擇“從頭開始構建”選項。

之後，您將有一個空白畫布開始在 Divi 中進行設計。

第 1 部分：創建標題部分

在第一部分中，我們將為佈局創建一個簡單的標題。

首先，向該部分添加一列行。

然後向該行添加一個新的文本模塊。

使用以下內容更新文本模塊內容：

<h2>Save The Date<h2>

然後更新標題文字樣式如下：

• 標題 2 字體：Prata
• 標題 2 文字大小：130 像素（桌面）、70 像素（平板電腦）、40 像素（手機）

第 2 部分：使用滾動動畫創建計數器

在下一部分中，我們將創建三個計數器，它們將滾動滾動數字直到停止顯示日期（月、日和年）。 每個計數器將使用總共 5 個文本模塊和一個分隔模塊構建。 第一個文本模塊將作為計數器的標籤（即月、日、年）。 接下來的四個文本模塊將分別包含不同的數字（在進行中），這些數字將使用 Divi 中的垂直運動偏移在滾動時進行動畫處理。 底部分隔器模塊將有助於隱藏數字的溢出。

這是如何做到的。

添加第二行

在現有行下，添加另一個單列行。

行設置

在添加任何模塊之前，請按如下方式更新行設置：

• 天溝寬度：1
• 填充：0px 頂部，0px 底部

列設置

然後打開列的設置並更新填充如下：

• 填充（桌面）：底部 100 像素
• 填充（平板電腦和手機）：底部 0px

添加文本模塊

然後在列中添加一個文本模塊。

內容/標籤

對於文本模塊內容，添加“月”一詞。

文字設計設置

添加內容後，按如下方式更新設計設置：

• 背景顏色：#ffffff
• 文字字體：Prata
• 文字文字大小：40px
• 文本行高：2em
• 寬度：100%
• 填充：頂部 20 像素，底部 20 像素，左側 20 像素，右側 20 像素
• 底部邊框寬度：5px
• 底部邊框顏色：#eeeeee

位置

然後在高級選項卡下，更新位置選項如下：

• 職位：相對
• Z 索引 1

為第一個數字添加文本模塊

一旦第一個文本模塊就位，我們就可以開始添加將滾動移動的數字。 要添加第一個數字，請在現有的“Month”文本模塊下添加一個新的文本模塊。

添加號碼/內容

然後將文本模塊標籤更新為“num1”以方便參考。 然後用數字“01”更新內容。

數字的設計設置

在設計選項卡下，更新以下內容：

• 文字字體：Prata
• 文字文字顏色：#8ab2d3
• 文字文字大小：70px
• 文字字母間距：4px
• 文本行高：1.5em
• 填充：左20px

注意：數字的文本大小為 70px，行高為 1.5em，這意味著文本模塊的總高度將接近 100px。 每當我們開始添加垂直運動偏移時，記住這一點很重要。 例如，向文本模塊添加垂直偏移“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 列以創建年份的第三個計數器。 然後根據需要更新每個文本模塊的內容。

最後結果

這是最終結果。

最後的想法

這種帶有滾動動畫數字計數器的簡單佈局應該可以派上用場，以新穎獨特的方式顯示數字數據。 隨意放棄約會的概念，用櫃檯做任何你能想到的事情！

我期待在評論中收到您的來信。

乾杯!