如何向節/行添加動畫

曾幾何時，在 Internet 上，向站點添加動畫是一項繁瑣且有些專業的任務。 然而，Divi 擁有強大的動畫工具和滾動效果，您無需大量技術專長即可實現。 任何人都可以輕鬆地將這些效果添加到他們的網站。 雖然本教程的流程可以應用於 Divi 中的任何元素，但我們今天將重點關注部分和行，以使用它們實現特定效果。 讓我們深入了解動畫！

預覽

桌面

移動的

將 Divi Builder 加載到頁面或帖子中

您需要做的第一件事是進入 Divi Builder。 無論您選擇我們的佈局包之一（我們將在本文中使用網球俱樂部佈局包）還是您自己的設計，所有步驟都在“部分”和“行”設置中進行。

通過這種設計，我們將動畫 1 個部分和 3 行以實現順序加載效果。

選擇預製佈局

要應用我們專業設計的佈局包之一，請輸入 Divi Builder 並選擇使用預製佈局。 這將顯示我們提供的所有免費贈品的列表。

選擇佈局

接下來，只需選擇要使用的佈局包。 您可以按類別排序或搜索關鍵字以查看我們為您創建的內容。

找到要設置動畫的部分和行

當佈局導入了所有資產並加載了頁面後，您將需要找到要添加動畫的部分和行。 請記住，部分在 Divi Builder 中用顏色編碼為Blue ，而Rows為Green 。

規劃好之後，讓我們開始添加這些動畫！

如何向節和行添加動畫 - 選項 1

將動畫添加到 Divi 部分非常簡單。 您首先需要進入部分設置。 然後，導航到“設計”選項卡並滾動，直到看到“動畫”選項。

在動畫選項下，您可以為您選擇的動畫調整多達 8 個不同的選項。

1. 動畫樣式是您選擇動畫顯示方式的地方。 如果該部分會像球一樣從頁面的一側翻滾或彈起。 最常見的是Fade和Slide 。
2. 方向- 您將設置元素移動的方向。 up值表示該部分將從底部開始並向上移動。 up不是原點。
3. 持續時間- 動畫從開始到結束持續的時間。 較低的值會加快速度，較高的值會減慢速度。
4. 延遲- 此選項可防止動畫盡快觸發，並且比立即觸發更有助於引起人們的注意。
5. 強度- 值越低，比動畫更流暢，而值越高，越活潑、更具侵略性。
6. 開始不透明度- 值為 0 將導致動畫開始不可見並在持續時間內聚焦。 100 表示元素在動畫開始之前完全可見。
7. 速度曲線- 這將允許您調整動畫開始和結束的平滑程度。
8. 重複——你的動畫是一次性效果，還是你想要一遍又一遍地循環播放？ 如果動畫設置為一次，則頁面必須重新加載才能再次啟動。

如何向節和行添加動畫 - 選項 2

Divi 還有一個叫做Scroll Effects的功能。 這些是在用戶將視口滾動到元素時觸發的動畫。 滾動效果可以設置為任何元素，並且可以與我們上面提到的動畫選項結合使用。

如何啟用滾動效果

同樣，Divi 中的任何元素都可以設置為啟用滾動效果，但我們今天正在處理部分和行。 因此，輸入您的部分設置，導航到“高級”選項卡，然後找到“滾動效果”標題。

選擇效果和触發器

在“滾動效果”選項中，您會找到可在滾動時觸發的不同類型動畫的各種選項卡。

• 粘性位置- 當用戶滾動過去時，該部分或行是否粘在用戶的屏幕上。
• 變換效果——這些是實際的動畫效果：水平和垂直移動、淡入/淡出、尺寸縮放、旋轉和模糊。
• 設置 [Feature] – 您將能夠設置效果在屏幕上最明顯的位置以及發生的時間/位置
• Motion Effect Trigger – 您將確定動畫是在元素頂部進入視口、元素中心還是底部時開始。

這些與使用上一節中的動畫選項的主要區別歸結為您是希望動畫自動化還是希望每次用戶執行操作時都觸發它。 您可以使用滾動效果和動畫選項組合動畫，我們將在主教程的效果中使用它們。

結合節和行的動畫

您可以通過組合在不同時間觸發的各種動畫來為您的網站創建一些令人驚嘆的效果。 通過使用動畫延遲選項，您的站點可以按順序為一系列部分、行和元素設置動畫，以呈現一些令人印象深刻的視覺效果。

首先，我們將在Section設置中將Animation Style設置為Slide ，並將Animation Direction設置為Up 。

我們將保留其餘選項的默認值。 尤其是動畫延遲。 我們希望該部分在查看時觸發。

第 1 行的動畫設置

接下來，我們將調整該部分的第一行。 我們進入Row設置，轉到Design選項卡下的Animation選項，然後再次選擇Slide 。 這一次，我們要將Direction更改為 Down ，將Animation Delay更改為 5 00ms 。 1000ms 等於 1 秒，記住。

由於我們將部分時間設置為 0 毫秒以立即觸發，因此我們希望該行稍微偏移，從而允許初始動畫在此動畫開始之前大部分完成。

第 2 行的動畫設置

接下來，我們將進入頁面第二行的設置並進入動畫選項。 同樣，我們將為動畫樣式選擇Slide ，該行將向右滑動。

此外，我們將Animation Delay設置為1000ms ，這意味著該動畫將在第一個動畫結束後立即觸發。

第 3 行的動畫設置

對於我們正在製作動畫的第三行，我們將使用滾動效果來實現我們的目標。 因為我們的第三行剛好在折疊上方開始，所以如果我們像處理其他元素一樣簡單地使用時間延遲，大多數動畫將是看不見的。 所以我們要做到這一點，所以情況並非如此。

動畫選項

首先，我們將重複上述過程。 只有這一行，我們將動畫樣式設置為淡入淡出。 然後，我們將Duration設置為500 毫秒，以便該行在其動畫過程中更快地出現。 我們將延遲1500 毫秒以確保其他動畫在此開始之前完全完成。

最後，請務必檢查“起始不透明度”是否設置為0% 。 我們希望這一行在準備好被看到之前是不可見的。

滾動效果設置

這是事情變得有趣的地方，因為我們可以組合效果。 單擊行的Advanced選項卡並找到Scroll Effects 。 找到水平運動選項卡並確保將其打開。 然後將Motion Effect Trigger設置為Middle of Element 。 我們使用中間而不是頂部來確保在用戶滾動之前效果不會開始生效，以防萬一用戶的視口顯示行的頂部。

使用該設置，該行將等到其他所有內容完成動畫顯示，然後當用戶向其滾動時，整行將出現從屏幕一側滑動。

最終結果

完成所有這些後，您的結果應該與此類似。

桌面

移動的

結論

添加動畫效果是使您的網站更具活力、更有趣和更具視覺吸引力的可靠方法。 使用 Divi 的內置動畫和滾動效果工具，您可以創建令人驚嘆的組合，讓任何碰巧路過的訪客驚嘆不已。

您使用 Divi 動畫效果從您的部分和行中創建了什麼？ 讓我們在評論中看到它們！

文章特色圖片來自 Vectorchok / shutterstock.com