如何在使用 Divi & GSAP 垂直滾動時自動水平滾動

已發表: 2021-03-17

您在網絡上瀏覽網站的次數越多，您就越會遇到一些真正定制的頁面體驗。 您可能想知道如何實現某些高級功能，答案通常是：通過使用動畫 JavaScript 庫。 現在流行的動畫庫是 GSAP。 但是僅僅因為你想使用 JavaScript 庫來做某事，並不意味著你也必須手動檢查 HTML 和 CSS 部分。 Divi 可以接管您網頁設計過程的大部分； 構建和設計，讓您有更多時間專注於自定義功能和動畫。 例如，在今天的教程中，我們將向您展示如何在使用 Divi 和 GSAP 實際垂直滾動時水平滾動。 這會產生高級動畫效果，您可以根據需要對其進行自定義。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

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

桌面

gsap 水平滾動

移動的

gsap 水平滾動

免費下載佈局

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

下載文件
免費下載

免費下載

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

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

方法概述

我們正在使用什麼

  • 迪維
  • GSAP JavaScript 庫
  • GSAP 的 ScrollTrigger 插件
  • 滾動觸發器演示

我們正在創造什麼

  • 垂直滾動時假水平滾動
  • 銷釘效應
  • 使效果在我們選擇的多個部分（不一定是整個頁面）上起作用
  • 跨所有屏幕尺寸的輕鬆橫屏體驗

1. 添加佔位符部分

添加第 1 節

首先向您正在處理的頁面添加第一部分。 此部分將用作佔位符，以便我們可以觀察效果是否到位。

gsap 水平滾動

漿紗

打開部分設置並為大小設置分配高度。

  • 高度：60vh

gsap 水平滾動

克隆部分 #1

然後，克隆一次佔位符部分。 這將幫助我們在頁面的頂部和底部生成一些空間，而不是水平滾動的一部分（參見預覽）。

gsap 水平滾動

1. 建築截面設計

在部分之間添加新部分

現在我們已經有了兩個佔位符部分，是時候創建我們將在水平滾動中使用的第一個部分了。 在兩個佔位符部分之間添加此部分。

gsap 水平滾動

漿紗

打開部分設置並在大小設置中分配最大高度。

  • 最大高度：100vh

gsap 水平滾動

溢出

我們還將垂直溢出設置為自動。 這與上一步中的最大高度相結合，將幫助我們在部分元素超過視口高度的某些屏幕尺寸上自動生成滾動條。

  • 垂直溢出：自動

gsap 水平滾動

添加新行

列結構

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

gsap 水平滾動

背景圖片

尚未添加模塊，打開行設置並使用背景圖像。

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

gsap 水平滾動

漿紗

修改下一行的大小設置。

  • 使用自定義裝訂線寬度：是
  • 天溝寬度：1
  • 寬度：
    • 台式機：70%
    • 平板電腦和手機：80%

gsap 水平滾動

間距

隨著間距設置。

  • 頂部填充：
    • 台式機：30vh
    • 平板電腦和手機：20vh
  • 底部填充：0px

gsap 水平滾動

列設置

然後，打開列設置。

gsap 水平滾動

背景顏色

為列使用白色背景色。

  • 背景顏色：#ffffff

gsap 水平滾動

間距

轉到列的設計選項卡並應用一些自定義填充值。

  • 頂部填充：5%
  • 底部填充：5%
  • 左填充：5%
  • 右填充：5%

gsap 水平滾動

邊界

也使用邊框。

  • 邊框寬度：1px
  • 邊框顏色：#000000

gsap 水平滾動

將文本模塊 #1 添加到列

添加H4內容

是時候添加模塊了，從包含一些 H4 內容的第一個文本模塊開始。

gsap 水平滾動

H4 文本設置

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

  • 標題 4 字體：Source Code Pro
  • 標題 4 文本顏色：#000000
  • 標題 4 文字大小：
    • 台式機：1.2vw
    • 平板電腦：2.5vw
    • 電話：3.5vw
  • 標題 4 字母間距：1px

gsap 水平滾動

將文本模塊 #2 添加到列

添加H3內容

在上一個文本模塊的正下方添加另一個文本模塊，並在內容框中使用一些 H3 內容。

gsap 水平滾動

H3 文本設置

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

  • 標題 3 字體：Alata
  • 標題 3 文字大小：
    • 台式機：2.5vw
    • 平板電腦：4vw
    • 電話：7vw

gsap 水平滾動

將文本模塊 #3 添加到列

添加內容

將最後一個文本模塊添加到帶有您選擇的一些描述內容的列中。

gsap 水平滾動

文字設置

相應地更改模塊的文本設置：

  • 文本字體：Source Code Pro
  • 字體大小：
    • 台式機：0.8vw
    • 平板電腦：2vw
    • 電話：3vw
  • 文本行高：1.5em

gsap 水平滾動

漿紗

接下來更改大小設置。

  • 寬度：
    • 台式機：67%
    • 平板電腦和手機：100%

gsap 水平滾動

間距

並通過將一些響應填充值應用於間距設置來完成模塊設置。

  • 頂部填充：
    • 台式機：3vh
    • 平板電腦和手機：5vh
  • 底部填充：
    • 台式機：3vh
    • 平板電腦和手機：5vh

gsap 水平滾動

將按鈕模塊添加到列

添加副本

我們需要完成行設計的最後一個模塊是按鈕模塊。 添加一些您選擇的副本。

gsap 水平滾動

按鈕設置

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

  • 為按鈕使用自定義樣式：是
  • 按鈕文字大小：
    • 台式機：0.8vw
    • 平板電腦：2vw
    • 電話：3vw
  • 按鈕文字顏色：#ffffff
  • 按鈕背景顏色：#000000
  • 按鈕邊框寬度：0px
  • 按鈕邊框半徑：0px
  • 按鈕字體：Source Code Pro
  • 按鈕字體樣式：大寫

gsap 水平滾動

gsap 水平滾動

間距

接下來添加一些自定義填充值。

  • 頂部填充：15px
  • 底部填充：15px
  • 左填充：50px
  • 右填充：50px

gsap 水平滾動

位置

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

  • 位置：絕對
  • 位置：左下角
  • 垂直偏移：-5%
  • 水平偏移：5%

gsap 水平滾動

2. 重用部分

克隆部分兩次

完成第一部分後，您可以將其克隆兩次。

gsap 水平滾動

更改圖像 & 複製 & 鏈接

確保在每個重複部分中更改圖像、複製和鏈接。

gsap 水平滾動

2. 添加功能

將 CSS 類添加到要包含在水平滾動中的每個部分

現在我們已準備好所有元素，我們可以開始關注所有元素的功能。 完成結果的第一步是為您希望成為水平滾動一部分的每個部分分配一個自定義 CSS 類。 在這種情況下，這意味著佔位符部分之間的三個部分。

  • CSS 類：水平截面

gsap 水平滾動

在頁面內的某處添加新的代碼模塊

接下來，向頁面添加代碼模塊。 這可以是您想要的任何地方。

gsap 水平滾動

首先添加 GSAP 和 ScrollTrigger 庫

將 GSAP 和 ScrollTrigger 庫複製粘貼到代碼模塊中。 為此使用腳本標籤與以下來源： 

src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"

gsap 水平滾動

為自定義代碼添加新的腳本標籤

在庫腳本標籤的正下方，我們將添加一些新的腳本標籤。

gsap 水平滾動

添加JS代碼

準備使用 JQuery

在這些腳本標籤中，我們將從加載 JQuery 開始。 

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

gsap 水平滾動

註冊 ScrollTrigger 插件

然後，我們將註冊 ScrollTrigger 插件。 

gsap.registerPlugin(ScrollTrigger);

gsap 水平滾動

將所有相關部分包裝在一個新的 Div 中

我們還使用以下代碼行將每個相關部分放在一個新的 div 中： 

var allSections = $('.horizontal-section');
allSections.wrapAll('<div class="horizontal-container"/>');

gsap 水平滾動

使用 ScrollTrigger 創建新的 GSAP Tween

為了使假水平滾動起作用，我們將使用帶有滾動觸發器的新補間。 實現這一點的代碼如下： 

gsap.to(allSections, {
  xPercent: -100 * (allSections.length - 1),
  ease: "none",
  scrollTrigger: {
    trigger: ".horizontal-container",
    pin: true,
    start: "top top",
    scrub: 1,
    snap: false,
    // base vertical scrolling on how wide the container is so it feels more natural.
    end: () => "+=" + document.querySelector(".horizontal-container").offsetWidth
  }
});

gsap 水平滾動

為自定義 CSS 代碼添加樣式標籤

接下來，我們將向我們的代碼模塊添加一些樣式標籤。

gsap 水平滾動

在樣式標籤之間插入 CSS 代碼

我們將通過在樣式標籤之間添加以下 CSS 代碼行來完成本教程和功能： 

.horizontal-container {
width: 300%;
height: 100%;
display: flex;
flex-wrap: nowrap;
max-width: none;
}

#page-container {
overflow: hidden;
}

.horizontal-section {
width: 100%;
will-change: transform;
}

gsap 水平滾動

預覽

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

桌面

gsap 水平滾動

移動的

gsap 水平滾動

最後的想法

在這篇文章中，我們向您展示瞭如何使用 Divi 和 GSAP 為您的網站加倍努力。 更具體地說，我們已經向您展示瞭如何在頁面上實際垂直滾動時水平滾動。 這是一種自定義類型的動畫，您可能在某個時候遇到過，並想知道如何使用 DIvi 來實現。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

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