每次使用 Divi 和 GSAP 滾動元素時如何重新啟動動畫

當涉及為頁面上的元素設置動畫時，您很可能希望在元素進入視口後激活元素的動畫。 使用 Divi 的內置動畫設置，只要該元素進入視圖並進行動畫處理，它就會保持靜態，直到您重新加載整個頁面。 在某些情況下，您可能會尋找一種更一致的方法，在這種方法中，您的動畫會隨著每個視口條目重新開始。 這樣做將幫助您簡化訪問者在您網站上的體驗。 在本教程中，我們將向您展示如何使用 Divi、GSAP 和 ScrollTrigger for GSAP。 一旦掌握了該方法，您就可以將其應用於頁面上的任何元素。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。

桌面

移動的

免費下載佈局

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

下載文件

免費下載

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

下載

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

1. 創建截面設計

添加佔位符部分

在開始創建設計之前，我們將向我們正在處理的頁面添加兩個佔位符部分。 這樣，一旦設計完成，我們就可以看到滾動體驗。 或者，您可以在已設置的頁面內使用該設計。 添加一個新的常規部分。

漿紗

修改截面的高度如下：

• 高度：100vh

克隆佔位符部分

然後，克隆該部分一次。

在佔位符部分之間添加新部分

為了創建您能夠在這篇文章的預覽中看到的設計，我們將在佔位符部分之間添加一個新的常規部分。

添加第 1 行

列結構

繼續使用以下列結構向該部分添加新行：

漿紗

還沒有添加模塊，打開行設置，轉到設計選項卡並更改大小設置如下：

• 使用自定義裝訂線寬度：是
• 天溝寬度：2
• 寬度：90%
• 最大寬度：2080px

將文本模塊 #1 添加到列

添加內容

然後，將第一個文本模塊添加到該列並包含您選擇的一些內容。

文字設置

轉到模塊的設計選項卡並相應地更改文本設置：

• 文字字體：蒙特塞拉特
• 文字字體粗細：重
• 文本字體樣式：大寫
• 文字顏色：#f9f9f9
• 字體大小：
  • 桌面：150px
  • 平板電腦和手機：11vw
• 文本行高：1.1em
• 文本對齊：居中

將文本模塊 #2 添加到列

添加 H2 內容

在前一個文本模塊下方添加另一個文本模塊並包含一些 H2 內容。

H2 文本設置

H2 文本的樣式如下：

• 標題 2 字體：蒙特塞拉特
• 標題 2 文本對齊：居中
• 標題 2 文字大小：
  • 桌面：80px
  • 平板電腦和手機：10vw

漿紗

也添加 100% 的寬度。

• 寬度：100%

位置

並在高級選項卡中重新定位整個模塊。

• 位置：絕對
• 地點：中心

添加第 2 行

列結構

使用以下列結構在前一行下方添加另一行：

漿紗

還沒有添加模塊，打開行設置並調整大小設置如下：

• 使用自定義裝訂線寬度：是
• 天溝寬度：2
• 寬度：90%
• 最大寬度：2080px

第 1 列設置

然後，打開第 1 列設置。

背景圖片

上傳您選擇的背景圖片。

• 背景圖片尺寸：封面
• 背景圖片位置：中心

間距

接下來修改列的間距設置。

• 頂部填充：100px
• 底部填充：
  • 桌面：400px
  • 平板電腦和手機：200px
• 左填充：5.5%
• 右填充：5.5%

將文本模塊 #1 添加到第 1 列

添加H4內容

然後，將文本模塊添加到第 1 列，其中包含一些 H4 內容。

H4 文本設置

相應地設置 H4 文本的樣式：

• 標題 4 字體：Lato
• 標題 4 字體粗細：重
• 標題 4 字體樣式：大寫
• 標題 4 文字大小：13px
• 標題 4 字母間距：2px

將文本模塊 #2 添加到第 1 列

添加H3內容

使用一些 H3 內容，在前一個文本模塊下方添加另一個文本模塊。

H3 文本設置

相應地更改 H3 文本設置：

• 標題 3 字體：蒙特塞拉特
• 標題 3 文字大小：36px
• 標題 3 字母間距：1px
• 標題 3 行高：1.2em

將文本模塊 #3 添加到第 1 列

添加說明內容

添加包含您選擇的一些描述內容的最後一個文本模塊。

文字設置

更改模塊的文本設置如下：

• 文字字體：Lato
• 文字顏色：#4c4c4c
• 文字字母間距：0.5px
• 文本行高：2em

將按鈕模塊添加到第 1 列

添加副本

本專欄中我們需要的最後一個模塊是按鈕模塊。 添加一些您選擇的副本。

按鈕設置

在設計選項卡中設置按鈕樣式。

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：14px
• 按鈕文字顏色：#ffffff
• 按鈕背景顏色：#000000
• 按鈕邊框寬度：0px

• 按鈕字體：Lato
• 按鈕字體粗細：粗體
• 按鈕字體樣式：大寫

重用第 1 列

刪除第 2 列和第 3 列

完成第 1 列及其中的所有模塊後，您可以刪除該行的其餘兩列。

克隆第 1 列兩次

並通過克隆兩次來重用第 1 列。

更改重複的列背景圖像

確保更改每個重複列的背景圖像。

更改重複列中的內容

隨著模塊內容。

將 Transform Translate 添加到第 2 列設置

然後，打開第 2 列設置並轉到設計選項卡。 在那裡，添加一些跨不同屏幕尺寸的轉換轉換值以完成設計。

• 剩下：
  • 桌面：50px
  • 平板電腦和手機：0px

2. 將重啟動畫技術應用到設計中

將 CSS 類添加到第 2 行

現在我們的設計已經到位，我們可以專注於重啟動畫技術。 為此，我們將同時針對多個模塊。 首先，打開第二行的設置並應用以下 CSS 類：

• CSS 類：trigger-animation-row

將代碼模塊添加到第 1 行

我們在本教程的上一步中添加的 CSS 類將幫助我們一次定位該行中的所有模塊。 為了創建重啟動畫，我們使用了一些 JQuery 代碼、GSAP JavaScript 庫和 GSAP 的 ScrollTrigger 庫。 要添加此代碼，我們將在第 1 行的第二個文本模塊下方插入一個新的代碼模塊。

添加 GSAP 和 ScrollTrigger 庫

確保在新腳本標籤中添加 GSAP 和 ScrollTrigger 庫。

• https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js
• https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js

添加新腳本標籤

然後，在庫腳本標籤下方添加新的腳本標籤。

添加 GSAP + ScrollTrigger 功能

在新的腳本標籤中，我們將復制粘貼以下 JQuery 代碼行：

jQuery(document).ready(function($){

var $module = $('.trigger-animation-row .et_pb_module');

$module.each(function(){
var $thisModule = $(this);

gsap.from($thisModule[0], {
scrollTrigger: {
trigger: this,
start: "bottom bottom",
end: "center top",
scrub: false,
repeat: -1,
toggleActions:'restart none none reset'
},
opacity: 0,
x: -100,
scale: 1.1,
duration: 2,
ease: "back"
});
});
});

此代碼將同時針對所有行模塊，並在訪問者再次進入視口時重新啟動動畫。 在這種情況下，動畫非常簡單且最小。 但是，使用 GSAP 和 ScrollTrigger，您可以創建您想要的任何類型的動畫，因此絕對值得研究！

預覽

現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何在元素進入視口後立即重新啟動動畫。 無論訪問者如何滾動，這種方法都可以幫助您創建一致的體驗。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。