Divi 網站英雄部分的 4 個動畫滾動按鈕（以及如何創建它們）
已發表: 2019-08-08動畫滾動按鈕有一個簡單而重要的工作，即吸引用戶的注意力並引導他們進入您的網頁。 這些類型的按鈕通常位於首屏，因此訪問者只需單擊按鈕即可，而無需滾動到網頁的下一個重要部分。 實際上，Divi 在全角標題模塊中內置了此滾動按鈕功能。
在本教程中，我將向您展示如何在 Divi 中創建完全自定義的動畫滾動按鈕。 因此，如果您正在全角標題模塊中尋找 Divi 內置滾動按鈕的創意替代方案，這些動畫滾動按鈕設計將幫助您指明正確的方向（字面意思）。
搶先看
以下是我們將一起構建的設計的快速瀏覽。
免費下載動畫滾動按鈕佈局
要了解本教程中的設計，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
訂閱我們的 YouTube 頻道
要將佈局導入您的頁面，只需提取 zip 文件並將 json 文件拖到 Divi Builder 中。
讓我們進入教程好嗎？
你需要什麼開始
首先，您需要具備以下條件：
- 已安裝並激活 Divi 主題
- 在前端從頭開始構建的新頁面（可視化構建器）
- 用於模擬內容的圖像
之後，您將有一個空白畫布開始在 Divi 中進行設計。
構建標題部分
在我們開始設計動畫滾動按鈕之前，我們需要設置我們的模擬標題部分。 由於我們將更加專注於獲得動畫滾動按鈕設計，因此我們將使用深色背景保持標題設計簡單。 完成後，我們可以復制該部分來處理每個新的滾動按鈕設計。
首先，創建一個具有一列行的常規部分。
然後在添加模塊之前，打開部分設置並添加深色背景，如下所示：
背景顏色：#222222
任何深色背景都可以。
添加標題文本
要創建模擬標題文本，請將新文本模塊添加到一列行。
然後使用位於默認段落文本上方的 h1 標題更新正文內容。
<h1>scroll button animation</h1> <p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
然後更新設計設置如下：
文字字體：Karla
文本 文本對齊：居中
標題文字大小：5vw
文字顏色：淺
這將是我們將用於不同動畫滾動按鈕的基本部分設計。
動畫滾動按鈕設計 #1：帶有慢速彈跳動畫的垂直文本
有了我們的基本部分設計，我們準備添加我們的第一個動畫滾動按鈕。 這個滾動按鈕由一個模糊模塊組成，右側有一個圖標。 然後文本和圖標將垂直旋轉，使箭頭圖標指向下方。 之後，我們將添加具有緩慢持續時間的反彈動畫。
這是如何做到的。
首先，在包含標題文本的行下方添加一個新的單列行。
然後向該行添加一個模糊模塊。
在模糊設置下，刪除默認正文內容並添加以下內容：
標題：滾動
使用圖標：是
圖標：右箭頭（見截圖）
然後更新設計設置如下：
圖標顏色：#ffffff
圖像/圖標放置：左
使用圖標字體大小：是
圖標字體大小：50px
標題字體樣式：TT
標題文字顏色：#ffffff
標題文字大小：14px
標題字母間距：3px
標題行高：50px（與圖標字體大小相同）
接下來，我們需要給我們的模糊設置一個寬度並垂直旋轉它，如下所示：
寬度：132px
模塊對齊：居中
Transform 旋轉 Z 軸：90 度
現在我們需要做的就是反轉宣傳語的內容順序，使箭頭圖標位於宣傳語的右側而不是左側。 這將使箭頭按預期顯示在垂直文本下方。 為此，我們需要將以下自定義 CSS 添加到主元素：
direction: rtl;
添加慢脈衝動畫
要添加動畫，請更新以下內容：
動畫風格：彈跳
動畫方向：下
動畫持續時間：5000ms
動畫延遲：400ms
圖像/圖標動畫：從左到右
最後結果
現在讓我們看看設計#1 的最終結果。
動畫滾動按鈕設計 #2：垂直選框文本動畫
下一個設計建立在設計#1 的基礎上，我們將保留使用模糊模塊創建的垂直文本滾動按鈕。 不同之處在於動畫。 對於這個設計，我們將添加一個幻燈片動畫，從滾動按鈕隱藏在行容器上方開始，然後以按鈕隱藏在行下方結束。 隨著動畫循環播放，這將創建一個吸引用戶眼球的文本選取框動畫效果。
這是如何做到的。
首先複製設計#1 的整個部分。
更新第 2 行設置
接下來，更新包含模糊模塊/滾動按鈕的部分行，如下所示：
水平溢出：隱藏
垂直溢出：隱藏
更新模糊模塊設置
為了創建選取框動畫，首先我們需要使用變換翻譯將模糊文本移動到行容器下方（從視圖中隱藏）。 這將是文本在動畫結束時的位置。 更新以下內容：
變換平移 Y 軸：115px
接下來，添加以下動畫設置：
動畫風格：幻燈片
動畫方向：下
動畫持續時間：4000ms
動畫強度：195%
動畫開始不透明度：100%
動畫速度曲線：線性
動畫重複：循環
最後結果
現在讓我們看看設計#3 的最終結果。
動畫滾動按鈕設計 #3：帶有延遲向下滑動動畫的箭頭選項卡
對於下一個設計，我們將結合一個文本模塊和一個模糊模塊來創建一個獨特的箭頭標籤設計。
對於此設計，我們將從基本的標題部分設計開始。 因此，您可以復制重複的設計 #3 部分，然後刪除第 2 行中的模糊模塊。
然後將文本模塊添加到第一行正下方的一列行。
然後用“滾動”一詞更新正文內容。
然後更新設計設置如下：
背景顏色：#ffffff
文字文字顏色：#222222
文本對齊：居中
寬度：50px
模塊對齊：居中
邊距：0px 底部
填充：頂部 20 像素，底部 20 像素
圓角 左下角 5px，右下角 5px
添加模糊圖標
現在文本模塊已經就位，我們需要在其正下方創建模糊圖標以完成箭頭選項卡設計。 為此，在文本模塊下添加一個新的模糊模塊。
然後刪除默認標題和正文。 然後添加更新以下內容：
使用圖標：是
圖標：底部箭頭三角形（見截圖）
然後按如下方式更新設置：
圖標顏色：#ffffff
邊距：-36px 頂部，0px 底部
這個負邊距會將箭頭附加到文本模塊，以獲得漂亮的箭頭標籤設計。
然後將以下css添加到模糊圖像中以去除圖標下方的一些不必要的邊距。
模糊圖像 CSS：
margin-bottom: 0px;
第 2 行設置和動畫
由於我們要向構成滾動按鈕設計的兩個模塊添加相同的動畫，因此需要將動畫添加到包含它們的行中。 更新該行的設置，如下所示：
最大寬度：100px
填充：0px 頂部，0px 底部
動畫風格：幻燈片
動畫方向：下
動畫持續時間：1200ms
第 1 行背景顏色和框陰影
此設計的最後一步涉及向滾動按鈕行正上方的第一行添加背景顏色。 並且通過更新該行的 Z 索引，我們將允許滾動按鈕動畫看起來好像它是通過標題突破的。
打開第 1 行的設置，如下所示：
背景顏色：#222222
Z 指數：10
盒子陰影：見截圖
框陰影垂直位置：80px
框陰影模糊強度：22px
框陰影擴散強度：-70px
陰影顏色：#222222（確保它與背景顏色匹配）
最後結果
現在看看最終的結果。
動畫滾動按鈕設計 #4：鼠標滾動動畫
對於最後一個動畫滾動按鈕，我們將通過組合文本模塊和模糊模塊來創建鼠標滾動動畫。
這是如何做到的。
首先，您可以使用基本標題部分。 然後在第 1 行下添加一個新行。
添加模糊模塊
接下來，向該行添加一個模糊模塊。 然後刪除默認標題和正文。
之後，更新圖標如下：
使用圖標：是
圖標：圓形（見截圖）
然後更新簡介設計設置如下：
圖標顏色：#ffffff
使用圖標字體大小：是
圖標字體大小：15px
動畫風格：幻燈片
動畫方向：下
動畫持續時間：1200ms
動畫重複：循環
圖像/圖標動畫：無動畫
然後將以下自定義 CSS 添加到 Blurb 圖像：
margin-bottom: 0px;
添加文本模塊
接下來，直接在模糊模塊下添加一個新的文本模塊。 然後用“滾動”一詞更新正文文本。
然後更新以下文本設置：
文字文字顏色：#ffffff
文本對齊：居中
寬度：90px
邊距：頂部 10 像素，左側 -30 像素
更新第 2 行設置
現在更新行設置如下：
寬度：30px
高度：60px
圓角：16px
邊框寬度：1px
邊框顏色：#ffffff
邊框樣式：純色
水平溢出：可見
垂直溢出：可見
最終結果
現在讓我們看看最終的結果：
添加錨鏈接功能
錨鏈接是那些跳轉到頁面不同部分的鏈接。 它們通常用於一頁網站。 我們可以使用相同的概念為我們的滾動按鈕添加一個錨鏈接，以便它們從頁面跳到所需的部分。 要將錨鏈接功能添加到動畫滾動按鈕，您需要做兩件主要的事情。
- 您需要在要跳轉到的部分或行中添加 CSS ID
- 您需要將具有相同 CSS ID 的錨鏈接添加到您的滾動按鈕
這是如何工作的。 首先，在包含滾動按鈕的標題部分下創建一個新部分。 然後在高級選項卡下為新部分提供一個 CSS ID。
然後找到您想要變成錨鏈接的元素/滾動按鈕，並添加一個以主題標籤（或井號）開頭的 url，後面緊跟您要跳轉到的元素的 CSS ID。
例如，如果該部分的 CSS ID 是“section-2”，那麼您將添加“#section-2”作為鏈接 URL。
請記住，Divi 允許您向 Divi 中的每個元素添加鏈接 URL，因此可以隨意添加指向包含動畫滾動按鈕的整行的鏈接。
有關更多信息，請查看您可以使用錨鏈接做的一些很酷的事情。
發揮創意！
不要害怕組合不同的模塊並以不同的方式為它們製作動畫。 事實上，當我探索使用 Divi 設計滾動按鈕的新方法時，我創建了一個有趣的拇指滾動動畫，可用於移動設備。 我已將其包含在上面的免費下載中，以防您想查看。
最後的想法
像這樣的動畫滾動按鈕很容易用 Divi 構建。 如果您將它們視為錨鏈接，它們可以在比標題更多的地方使用。 我希望這些設計能激發您為下一個項目創建一些全新的滾動按鈕。
我期待在評論中收到您的來信。
乾杯!