如何使用 Divi 的滾動效果設計動畫時鐘
已發表: 2020-07-20網絡上充滿了需要與時間相關的設計口音（速度優化、即將發生的事件等）的網站。 在大多數情況下，時鐘圖標或圖形可以很好地工作。 但是，創建動畫時鐘設計肯定會給您的網站設計帶來獨特的“旋轉”。
借助 Divi 中可用的所有內置設計選項，我們可以從頭開始創建出色的動畫時鐘設計。 在本教程中，我們將創建一個動畫時鐘，當用戶向下滾動頁面時，它會轉動時鐘的指針。
讓我們開始吧！
搶先看
這是我們將在本教程中構建的設計的快速瀏覽。
免費下載動畫時鐘佈局
要了解本教程中的設計，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
要將部分佈局導入您的 Divi 庫，請導航到 Divi 庫。
單擊導入按鈕。
在可移植性彈出窗口中，選擇導入選項卡並從您的計算機中選擇下載文件。
然後點擊導入按鈕。
完成後，分區佈局將在 Divi Builder 中可用。
讓我們進入教程，好嗎？
你需要什麼開始
首先，您需要執行以下操作：
- 如果您還沒有安裝並激活 Divi 主題。
- 在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
- 選擇“從頭開始構建”選項。
之後，您將有一個空白畫布開始在 Divi 中進行設計。
第 1 部分：設計鐘面
首先，向常規部分添加一列行。
行設置
在添加任何模塊之前，打開行設置並更新以下內容：
- 背景顏色：#003a5c
在設計選項卡下，更新以下內容：
- 天溝寬度：1
- 寬度：50vw
- 最大寬度：500px
- 高度：50vw
- 最大高度：500px
- 圓角：50%
- 邊框寬度：15px
- 邊框顏色：#ffffff
- 盒子陰影：見截圖
- 框陰影垂直位置：0px
- 框陰影模糊強度：68px
- 陰影顏色：rgba(0,0,0,0.22)
在高級選項卡下，更新可見性選項如下：
- 水平溢出：隱藏
- 垂直溢出：隱藏
第 2 部分：添加小時標記
一旦將行設計為鍾面，我們就可以添加代表十二個零點、三個零點、六個零點和九個零點的小時標記。 每個標記都將使用分隔模塊創建。
12 點鐘標記
首先在行內添加一個新的分隔模塊。
然後更新背景顏色如下：
- 背景顏色：#78acf4
- 寬度：10vw
- 最大寬度：150px
- 高度：3px
- 圓角：8px
- 變換旋轉 Z 軸：90 度
在高級選項卡下，給分隔線一個絕對位置：
- 位置：絕對
- 位置：頂部中心
6 點鐘標記
要創建 3 點鐘標記，請複制用於創建 12 點鐘標記的分頻器。 （此時最好在圖層模式中標記您的模塊。）然後打開重複的分隔符並更新位置位置，如下所示：
- 位置：底部中心
3 點鐘標記
要創建 3 點鐘標記，請複制 6 點鐘標記。 然後打開新副本的設置（確保將其標記為“3 點鐘”）並更改以下內容：
- 位置：右中
然後更新轉換選項如下：
在翻譯選項卡下...
- 變換平移 X 軸：50%
在旋轉選項卡下
- 變換旋轉 Z 軸：0deg
9 點鐘標記
要創建 3 點鐘標記，請複制 6 點鐘標記。 然後打開新副本的設置（確保將其標記為“9 點鐘”）並更改以下內容：
- 位置：左中
然後更新轉換選項如下：
在翻譯選項卡下...
- 變換平移 X 軸：-50%
第 3 部分：創建時鐘指針（秒、分和小時）
一旦小時標記就位，我們就可以開始創建時鐘指針了。 我們將從二手開始。
二手貨
要創建秒針，請複制 12 點鐘的分隔線並使用圖層模式將其拖到列中其餘分隔線的下方。
然後將新的副本標記為“第二個”。
打開模塊的設置，更新Advanced選項卡下的位置：
- 地點：中心中心
在設計選項卡下，更新尺寸如下：
- 寬度：20vw
- 最大寬度：200px
- 高度：0.5vw
- 最大高度：7.5px
現在秒針位於鍾面的中間，但我們希望秒針的底部像普通時鐘一樣從中心開始。 然後我們希望指針的底部保持在中心作為旋轉原點，以便指針能夠像在實際時鐘上一樣旋轉。 為此，我們需要使用變換選項的組合來定位和旋轉來自特定變換原點的分隔線。
更新以下內容：
在翻譯選項卡下...
- Transform Translate X Axis: 0%（這是很重要的一步）
在旋轉選項卡下...
- 變換旋轉 Z 軸：-90 度
在 Origin 選項卡下...
- 變換原點：左中心
由於一旦我們添加滾動效果，這隻手會移動得非常快，讓我們給它一個半透明的背景顏色，這樣它就不會太分散注意力。
- 背景顏色：rgba(175,175,175,0.12)
分針
要創建分針，請複制秒針模塊並標記重複的“分鐘”。 然後打開新的分隔線模塊並更新背景顏色：
- 背景漸變左顏色：#78acf4
- 背景漸變右顏色：#b0b9ff
- 梯度方向：90度
然後更新設計如下：
- 寬度：15w
- 最大寬度：150px
- 身高：1vw
- 最大高度：15px
時針
分針完成後，複製秒針模塊並標記複製的“小時”。 然後打開新的divider模塊，更新背景色如下：
- 背景顏色：#ffffff
然後更新設計選項卡下的尺寸如下：
- 寬度：10vw
- 最大寬度：100px
此時，您將為滾動效果準備好所有三個時鐘指針！
第 4 部分：為每個時鐘指針添加旋轉滾動效果
要旋轉時鐘指針，我們將向三個時鐘指針中的每一個添加旋轉滾動效果。 由於我們正在處理時鐘設計，因此請務必記住，我們可以使用每個時鐘指針的旋轉度數來表示實際時間。 例如，將時針旋轉 30 度將代表 1 點鐘，60 度將代表 2 點鐘，依此類推。
時針旋轉滾動效果
首先，我們將為時針添加旋轉滾動效果。 打開時針分隔設置並添加以下變換效果：
在旋轉選項卡下...
- 啟用旋轉：是
- 起始旋轉：0度（10%）
- 中間旋轉：15 度（在 50% 時）
- 結束旋轉：30 度（在 90% 時）
分針旋轉滾動效果
接下來，我們將為分針添加旋轉滾動效果。 打開分針分頻器設置，添加如下變換效果：
在旋轉選項卡下...
- 啟用旋轉：是
- 起始旋轉：0度（10%）
- 中間旋轉：180 度（50% 時）
- 結束旋轉：360 度（90%）
秒針旋轉滾動效果
接下來，我們將為秒針添加旋轉滾動效果。 打開秒針分隔設置並添加以下變換效果：
在旋轉選項卡下...
- 啟用旋轉：是
- 起始旋轉：0度（10%）
- 中間旋轉：5400 度（在 50% 時）
- 結束旋轉：10800deg（90%）
注意：秒針要精確旋轉到 1 小時需要旋轉 21600 度。 但由於這太快了，我認為最好將其減半。 畢竟，這是出於設計目的。
最終結果
這是最終的設計。
這就是滾動效果的最終結果。 請注意向下滾動頁面時時間是如何恰好過去一小時的。
最後的想法
我們可以使用滾動效果如此準確地表示時間來製作這樣的時鐘設計，真是太神奇了。 隨意嘗試添加更多旋轉滾動效果，以在滾動時加快和減慢時鐘時間。 此外，您可以使用此時鐘設計來強調大量 CTA 或標題。
我期待在評論中收到您的來信。
乾杯!