如何結合滾動捕捉和運動效果以實現平滑動畫

如果您正在尋找一種使用 Divi 的內置滾動效果創建流暢動畫的方法，那麼您會喜歡這篇文章的。 我們將向您展示如何將滾動捕捉與 Divi 的內置運動效果相結合，以創建可以一次性滾動的全高部分。 我們將從創建第一部分開始。 然後，我們將在整個頁面設計中重複使用該部分。 為了啟用滾動捕捉，我們將使用 CSS 滾動捕捉屬性，我們將這些屬性分配給我們頁面的部分、HTML、頁眉和頁腳。 您還可以免費下載該頁面的 JSON 文件！

讓我們開始吧。

預覽

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

桌面

移動的

免費下載流暢的動畫佈局

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

下載文件

免費下載

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

下載

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

1. 創建新頁面並開始設計第一部分

添加新頁面並切換到 Visual Builder

首先添加一個新頁面。 輸入頁面標題，發布頁面並切換到 Visual Builder。

部分設置

漿紗

進入新頁面後，打開已經存在的部分並更改大小設置。

• 最小高度：100vh

主要元素

我們還將向該部分添加兩行 CSS 代碼。 這些 CSS 代碼行將幫助我們將該部分變成滾動捕捉的捕捉點。

scroll-snap-align: start;
scroll-snap-stop: normal;

能見度

為了確保沒有超出部分容器的內容，我們將隱藏部分的溢出。

• 水平溢出：隱藏
• 垂直溢出：隱藏

添加第 1 行

列結構

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

漿紗

在不添加任何模塊的情況下，打開行設置並修改大小如下：

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 寬度：100%
• 最大寬度：100%

間距

我們還將刪除該部分的默認頂部和底部填充。

• 頂部填充：0px
• 底部填充：0px

位置

我們將相應地重新定位該行：

• 位置：絕對
• 位置：底部中心

將文本模塊添加到列

將內容框留空

我們在這一行中唯一需要的模塊是文本模塊。 確保將模塊的內容框留空。

背景顏色

然後，更改背景顏色。

• 背景顏色：#ffee00

文字設置

我們也將刪除模塊的文本行高。

• 文本行高：1em

漿紗

然後，我們將轉到大小設置並更改寬度。

• 寬度：30%

間距

我們還將通過添加一些頂部填充將模塊變成一個正方形。

• 頂部填充：30%

添加第 2 行

列結構

進入下一行。 使用以下列結構：

漿紗

在不添加任何模塊的情況下，打開行設置並在設計選項卡中更改大小設置：

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 寬度：60vw
• 最大寬度：100%

間距

接下來在不同的屏幕尺寸上添加一些自定義上邊距。

• 最高邊距：20vh（台式機），5vw（平板電腦和手機）

第 2 列間距

然後，我們將打開第 2 列設置並添加一些自定義填充值。

• 頂部填充：2vh（平板電腦和手機）
• 左填充：2vw
• 右填充：2vw

將圖像模塊添加到第 1 列

上傳圖片

是時候添加模塊了，將圖像模塊添加到第 1 列並上傳您選擇的圖像。

漿紗

接下來我們將在模塊上強制使用全角。

• 強制全角：是

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

添加 H2 內容

在第二列中，我們需要的第一個模塊是帶有一些 H2 內容的文本模塊。

H2 文本設置

轉到模塊的設計選項卡並按如下方式更改 H2 文本設置：

• 標題 2 字體：Anton
• 標題 2 文字大小：5vw（桌面）、7vw（平板電腦）、9vw（手機）

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

添加內容

在上一個文本模塊的正下方添加另一個文本模塊，並插入一些您選擇的描述內容。

文字設置

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

• 文字字體：Open Sans
• 文字大小：0.8vw（桌面）、2vw（平板電腦）、2.5vw（手機）
• 文本行高：1.8em

間距

並在間距設置中添加一些自定義的頂部和底部邊距。

• 最高利潤率：2vw
• 底邊距：2vw

將按鈕模塊添加到第 2 列

添加副本

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

按鈕設置

相應地設置按鈕樣式：

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：1vw（桌面）、2vw（平板電腦）、3vw（手機）
• 按鈕文字顏色：#333333
• 按鈕邊框顏色：#333333
• 按鈕邊框半徑：1px

• 按鈕字體：Anton
• 按鈕字體樣式：大寫

間距

並通過在不同屏幕尺寸上添加一些自定義填充值來完成模塊設置。

• 頂部填充：1vw（桌面）、2vw（平板電腦）、3vw（手機）
• 底部填充：1vw（桌面）、2vw（平板電腦）、3vw（手機）
• 左填充：3vw（桌面）、5vw（平板電腦）、7vw（手機）
• 右填充：3vw（桌面）、5vw（平板電腦）、7vw（手機）

2. 為不同元素添加滾動效果

第 1 行中的文本模塊

垂直運動

一旦所有元素就位，就該添加滾動效果了。 打開第一行的文本模塊並使用一些垂直運動。

• 啟用垂直運動：是
• 起始偏移：4
• 中間偏移：0
• 結束偏移：-4
• 運動效果觸發器：元素中間

第 2 行

第 1 欄

水平運動

然後，打開第二行的第一列並添加一些水平運動。

• 啟用水平運動：是
• 起始偏移：-3
• 中間偏移：0（從 40% 到 60%）
• 結束偏移：-3
• 運動效果觸發器：元素中間

淡入淡出

我們也在對同一列應用淡入淡出效果。

• 啟用淡入淡出：是
• 起始不透明度：0%
• 中等不透明度：100%
• 結束不透明度：100%
• 運動效果觸發器：元素中間

第 2 欄

水平運動

然後，我們將打開第二列的設置並應用以下水平運動設置：

• 啟用水平運動：是
• 起始偏移：3
• 中間偏移：0（從 40% 到 60%）
• 結束偏移：3
• 運動效果觸發器：元素中間

淡入淡出

隨著淡入淡出效果。

• 啟用淡入淡出：是
• 起始不透明度：0%
• 中等不透明度：100%
• 結束不透明度：100%
• 運動效果觸發器：元素中間

4. 重用第一部分

克隆部分四次

完成第一部分及其滾動效果後，您可以根據需要多次克隆它。

更改每個其他部分的背景顏色

我們將更改每個其他部分的背景顏色。

• 背景顏色：#111111

5. 添加 CSS 代碼以在頁面的 HTML 上啟用滾動捕捉

將代碼模塊添加到頁面的最後一節

現在，為了在我們頁面的 HTML 上啟用滾動捕捉，我們將在頁面的最後一部分的任何位置添加一個代碼模塊。

插入 HTML CSS 代碼

這些 CSS 代碼行將幫助我們將滾動捕捉應用到我們頁面的 HTML：

<style>

html {
overflow-x: hidden;
scroll-snap-type: y proximity;
}

</style>

將滾動捕捉開始添加到頁眉和頁腳

我們將通過添加以下 CSS 代碼行來確保我們的頁眉和頁腳也是滾動捕捉點（就像我們的部分一樣）：

header, footer {
scroll-snap-align: start;
}

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何通過將滾動捕捉與 Divi 的內置運動效果相結合來創建流暢的動畫。 這是通過一次滾動啟用滾動效果的好方法。 滾動捕捉可幫助訪問者輕鬆滾動瀏覽您網站的不同部分。 我們將其與全高截面設計相結合。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

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