如何使用 Divi 的滾動效果創建分離圖像過渡
已發表: 2020-02-28Divi 的滾動效果使我們能夠創建出色的過渡動畫，以引人注目的設計讓訪客驚嘆不已。 尤其是圖像，可以以令人驚訝的方式展示這些滾動效果的力量。 在本教程中，我們將逐步解釋如何使用 Divi 的滾動效果創建分離的圖像過渡。 此效果最初出現在演示頁面上。 這種效果涉及使用像 Photoshop 這樣的照片編輯器預先對圖像進行切片（這很容易做到）。 圖像切片後，我們需要做的就是將它們添加到 Divi 並使用內置的滾動效果來實現魔術。
讓我們開始吧。
搶先看
這是今天的設計一覽。
您還可以在演示頁面上標題為“鍛煉不必無聊”下查看設計的原始現場演示。
免費下載 Breakaway Image Transition Divi 佈局
要了解本教程中的佈局，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
要將佈局導入您的頁面，只需提取 zip 文件並將 JSON 文件拖到 Divi Builder 中。
讓我們進入教程，好嗎？
你需要什麼開始
首先，您需要執行以下操作：
- 如果您還沒有安裝並激活 Divi 主題。
- 在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
- 選擇“從頭開始構建”選項。
之後，您將有一個空白畫布開始在 Divi 中進行設計。
除了上面的 Divi 設置之外，您還需要：
- 兩張圖片（至少 1080 像素 x 540 像素）
- 像Photoshop這樣的照片編輯軟件在將圖像添加到Divi之前對圖像進行切片。
第 1 部分：在 Photoshop 中切片圖像
在我們開始在 Divi 中創建我們的設計之前，我們需要對將用於分離過渡滾動效果的兩個圖像進行切片。 兩個圖像都需要裁剪，以便它們正好是 1080 像素 x 540 像素。 之後，它們需要被切成 8 個相等的部分（4 個，2 個向下）。 準備好後，我們可以將它們保存到我們的計算機並將圖像切片上傳到我們的網站。 讓我們從第一張圖片開始。
圖片#1
裁剪圖像
我們需要做的第一件事是裁剪圖像，使其精確尺寸為 1080 像素 x 540 像素。 您可以使用任何圖像編輯軟件來執行此操作。 在 Photoshop 中，您可以使用裁剪工具。
切片圖像
接下來，單擊以使用切片工具並選擇整個圖像。 右鍵單擊切片/圖像並選擇分割切片選項。
在分割切片選項框中，更新以下內容：
橫向分為：
- 2 片，均勻間隔
- 每切片 270 像素
縱向分為：
- 4 片，均勻間隔
- 每切片 270 像素
然後單擊確定。
保存圖像切片
現在我們將圖像切成 8 個相等的塊，每個塊的大小為 270 像素 x 270 像素。
要保存圖像切片，請導航到文件 > 導出 > 保存為 Web。
然後選擇文件格式並單擊保存。
在彈出框中，確保更新以下內容：
- 另存為：[輸入圖像名稱]
- 格式：僅圖像
- 設置：默認設置
- 切片：所有切片
然後點擊保存。
現在您所有的圖像切片都將保存到計算機，準備上傳到 Divi。
圖片#2
要創建此分離圖像過渡滾動效果所需的第二張圖像，我們應該遵循與創建第一張圖像相同的過程（裁剪、切片和保存）。
旋轉圖像切片
但是，由於旋轉滾動效果的工作方式，構成第二個圖像的每個圖像切片都需要向左或向右旋轉 90 度。
要旋轉圖像，您可以使用 Photoshop 或操作系統中的內置圖像編輯軟件（您甚至可以使用 WordPress 媒體庫在將圖像上傳到您的網站後對其進行編輯和旋轉。）。
以下是切片圖像時如何在其原始位置內旋轉圖像的指南。
這是原始圖像。
以下是在將圖像切片上傳到您的網站之前應如何旋轉它們。
這是必要的，以便我們最終可以獲得以下滾動效果。
現在兩個圖像都被裁剪、切片、保存和旋轉，您可以將它們添加到您的 Divi 站點。 您總共應該有 16 張圖片（圖片 1 中的 8 張，圖片 2 中的 8 張）。
第 2 部分：在 Divi 中創建分離圖像過渡滾動效果
一旦圖像切片準備就緒，我們就可以在 Divi 中開始設計過程。 這是如何做到的。
添加第 1 行
首先，創建一個四列行。
行設置
打開行設置並更新以下內容：
- 天溝寬度：1
- 最大寬度：1080 像素（桌面），540 像素（平板電腦和手機）
- 填充：0px 頂部，0px 底部
- 水平溢出：可見
- 垂直溢出：可見
更新部分填充
由於我們要將第二行絕對定位在第一行的頂部，因此我們需要去掉該部分的頂部（和底部）填充，以便它不會偏離第二行的位置。 打開部分設置並更新以下內容：
- 填充：頂部 0px，左側 0px
添加圖像
在第一行，我們將添加構成第一張圖像的 8 個圖像/切片中的每一個。 圖像應完全按照它們在 Photoshop 中切片的方式（4 橫 2 下）定位在列中。
這是每個標有數字的圖像的說明。 這是將所有圖像添加到行後的樣子。
圖片#1
將第一個圖像模塊添加到第 1 列。
然後將第一個圖像切片上傳到模塊。
滾動效果
在高級選項卡下，向圖像添加以下滾動效果。
- 啟用淡入淡出：是
- 起始不透明度：100%（在 20% 視口處）
- 中等不透明度：100%（在 20% 視口處）
- 結束不透明度：0%（在 50% 視口處）
單擊比例選項卡並更新以下內容：
- 啟用向上和向下擴展：是
- 起始比例：100%（在 20% 視口處）
- 中比例：70%（在 32% – 48% 視口下）
- 結束比例：100%（在 60% 視口處）
單擊旋轉選項卡並更新以下內容：
- 啟用旋轉：是
- 開始旋轉：0 度（在 0% 視口處）
- 中間旋轉：0 度（在 20% 視口處）
- 結束旋轉：-90 度（在 60% 視口處）
向下滾動頁面時，滾動效果將如下所示。
圖片#2
要創建圖像 #2，請複製圖像 #1 並將副本放在第 2 列中。
使用圖像 #2 更新重複的圖像模塊。
更新滾動效果
我們將保留圖像 #1 中的大部分相同滾動效果。 我們唯一需要改變的是旋轉。 轉到高級選項卡並將結束旋轉更改為 90 度（而不是 -90 度），使其向相反方向旋轉。
- 結束旋轉：90 度
圖片#3
要創建圖像 #3，請將圖像 #1 複製並粘貼到第 3 列，然後將圖像更改為圖像 #3。
圖片#4
要創建圖像 #4，請將圖像 #2 複製並粘貼到第 4 列並將圖像更新為圖像 #4。
圖像#5
要創建圖像 #5，請複製圖像 #1，以便副本位於第 1 列的正下方。 
將圖像更新為圖像 #5。 然後更新淡入淡出滾動效果如下：
- 起始不透明度：100%（在 0% 視口處）
- 中間不透明度：100%（在 0% 視口處）
- 結束不透明度：0%（在 40% 視口處）
然後更新 Scaling Up 和 Down 滾動效果如下：
- 起始比例：100%（在 0% 視口處）
- 中比例：70%（12% – 28% 視口）
- 結束比例：100%（在 40% 視口處）
最後，更新旋轉滾動效果如下：
- 開始旋轉：0 度（在 0% 視口處）
- 中間旋轉：0 度（在 0% 視口處）
- 結束旋轉：90 度（在 40% 視口處）
圖片#6
要創建圖像 #6，複製圖像 #5 並將其移動到第 2 列（在圖像 #2 下）。
使用圖像 #5 更新圖像模塊。 然後將旋轉滾動效果調整為相反方向（-90度）如下：
- 結束旋轉：-90 度
圖片#7
要創建圖像 #7，複製圖像 #5 並將其移動到第 3 列中的圖像 #3 下。然後使用圖像 #7 更新復製圖像模塊。
圖片#8
要創建圖像 #8，複製圖像 #6 並將其移動到第 4 列中的圖像 #4 下。然後使用圖像 #8 更新復制的圖像模塊。
現在所有的圖像切片都已添加到具有分離滾動效果的第 1 行。
這是到目前為止的結果。
添加第 2 行
第二行圖像不會花費太多時間來設計。 我們需要做的就是複制第 1 行，用正確的圖像更新所有圖像，然後給它一個絕對位置。
繼續並複制第 1 行。
更新第 2 行圖像
記住我們為圖像 #2 創建的旋轉圖像。 現在，我們需要做的就是將它們中的每一個上傳到第 2 行中的正確圖像模塊位置。
更新圖像滾動效果
一旦新的旋轉圖像就位，我們需要從第 2 行中的所有圖像中去除淡入淡出滾動效果。
這樣做，部署線框視圖模式並使用多選來選擇第 2 行中的所有 8 個圖像。 然後打開所選圖像之一的設置以部署元素設置。 在淡入淡出滾動效果選項下，更新以下內容：
- 啟用淡入淡出：否
位置行 #2
我們的最後一步是將第 2 行直接放在第 1 行後面。 一個簡單的方法是給出行和絕對位置。 打開第 2 行的設置並更新以下內容：
- 位置：絕對
- 位置：頂部中心
最後結果
要查看結果，您可能需要為您的部分提供大量的頂部和底部邊距，或者在設計上方和下方創建其他部分。 這將為您提供正確查看滾動效果所需的空間。
讓我們看看最終的結果。
這是在手機上。
最後的想法
這種分離的圖像轉換本身就是一個令人印象深刻的設計，但您可以輕鬆地使用它向訪問者傳達轉換類型的信息（例如之前和之後）。 而且您也不必滿足於這種設計。 隨意嘗試不同的滾動效果，以創建更驚人的圖像過渡。 有什麼想法嗎？
我期待在評論中收到您的來信。
乾杯!