如何使用 Letterize.js 和 Anime.js 在 Divi 中添加高級文本動畫

在為您的網站添加額外優勢時，Divi 的內置動畫提供了大量的可能性。 但是，這些動畫允許您一次向一個容器添加一個動畫。 雖然在大多數情況下這通常已經綽綽有餘，但有些項目您會想要加倍努力。 例如，您可能會發現自己想要添加高級文本動畫。 在本教程中，我們將向您展示如何做到這一點。 如果您想學習如何將 Divi 作為框架與外部 Javascript 庫相結合，本教程是一個很好的墊腳石。 我們將使用 Divi 的內置元素和選項創建我們的整個設計，然後使用 letterize.js 和anime.js 庫定位我們的文本模塊以創建高級文本動畫。 一旦您理解了該方法，您將能夠創建您可以想像的任何類型的高級文本動畫！

讓我們開始吧！

預覽

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

桌面

移動的

免費下載高級文本動畫佈局

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

下載文件

免費下載

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

下載

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

1.創建英雄部分設計

添加新部分

間距

首先創建一個新頁面或打開一個現有頁面。 在您的頁面內，添加一個新部分。 打開部分設置並修改不同屏幕尺寸的頂部和底部填充。

• 頂部填充：180 像素（桌面）、100 像素（平板電腦）、50 像素（手機）
• 底部填充：180 像素（桌面）、100 像素（平板電腦）、50 像素（手機）

添加第 1 行

列結構

繼續使用以下列結構添加新行：

間距

在不添加任何模塊的情況下，打開行設置並刪除所有默認的底部填充。

• 底部填充：0px

將文本模塊 #1 添加到列

添加 H1 副本

我們在這一行中唯一需要的模塊是文本模塊。 添加一些您選擇的 H1 內容。

H1 文本設置

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

• 標題字體：蒙特塞拉特
• 標題文字顏色：rgba(232,232,232,0.41)
• 標題文字大小：80 像素（桌面）、50 像素（平板電腦）、40 像素（手機）
• 標題字母間距：-10px（桌面）、-4px（平板電腦）、-3px（手機）
• 標題行高度：0.6em（桌面）、0.7em（平板電腦）、0.8em（手機）

添加第 2 行

列結構

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

漿紗

打開行設置並在大小設置中更改最大寬度。

• 最大寬度：1680px

間距

接下來刪除所有底部邊距和填充。

• 下邊距：0px
• 底部填充：0px

將圖像模塊添加到列

上傳插圖

然後，添加一個圖像模塊並上傳您可以在本文開頭下載的文件夾中找到的免費插圖。

漿紗

移至模塊的設計選項卡並強製圖像全角。

• 強制全角：是

間距

接下來添加一些負底邊距。

• 底部邊距：-12%

動畫片

並通過添加以下動畫設置完成模塊設置：

• 動畫風格：淡入淡出
• 動畫延遲：3000ms

添加第 3 行

列結構

到下一行和最後一行。 使用以下列結構：

間距

轉到行的設計選項卡並添加一些自定義填充值。

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

盒子陰影

然後，啟用一個微妙的框陰影。

• 框陰影模糊強度：80px
• 陰影顏色：rgba(0,0,0,0.06)

動畫片

並通過添加以下動畫完成行設置：

• 動畫風格：淡入淡出
• 動畫延遲：3000ms

將文本模塊 #2 添加到列

添加內容

是時候添加模塊了。 我們需要的第一個模塊是帶有一些描述內容的文本模塊。

文字設置

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

• 文字字體：Lato
• 文字大小：18px
• 文字字母間距：1px
• 文本行高：2.7em

將按鈕模塊添加到列

添加副本

我們需要的最後一個模塊是按鈕模塊。 輸入您選擇的一些副本。

按鈕設置

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

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：16px
• 按鈕文字顏色：#171cff
• 按鈕邊框寬度：0px
• 按鈕邊框半徑：0px

• 按鈕字體：蒙特塞拉特
• 按鈕字體樣式：大寫

間距

然後，在間距設置中應用以下填充值：

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

盒子陰影

通過添加以下框陰影來完成模塊設置：

• 框陰影垂直位置：5px
• 框陰影擴散強度：-2px
• 陰影顏色：#171cff

2. 將 CSS 類添加到標題

打開文本模塊 #1 並單擊文本選項卡

現在我們已準備好所有設計元素，是時候將高級文本動畫添加到我們的標題中了。 打開包含 H1 副本的文本模塊並選擇文本選項卡。

將 CSS ID 添加到 H1 標籤

在 H1 中添加自定義 CSS ID。

• ID="標題複製"

3.添加Letterize和動漫庫

將代碼模塊添加到列

為了創建動畫，我們使用了 letterize.js 和anime.js 庫。 要添加這些庫，請在最後一行的列中插入一個新的代碼模塊。

添加兩個庫

然後，添加兩個不同的腳本標籤，其中包含以下指向庫的源：

• src="https://cdn.jsdelivr.net/gh/WojciechWKROPCE/letterize-js/lib/letterize.min.js"
• src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"

4.添加動畫代碼

個人級別的字母動畫

在本教程的最後一部分，我們將添加屬於 letterize.js 和anime.js 庫的動畫代碼。 為了實現您在這篇文章的預覽中看到的效果，我們將應用兩種類型的動畫。 第一個動畫單獨且連續地應用於每個字母。 這是通過 letterize.js 庫實現的。 該庫與下面代碼的第一部分相結合，將副本中的每個字母放在一個單獨的跨度內。 然後，這些跨度將在整個動畫過程中單獨定位。 確保將下面的代碼放在腳本標記之間。

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

var headlineCopy = new Letterize({
targets: "#headlineCopy"
});

var animation = anime.timeline({
targets: '#headlineCopy span',
delay: anime.stagger(20),
loop: false
});

animation
.add({
opacity: [0, 1],
scale: [0, 1.2, 1],
duration: 1500,
elasticity: 600,
color: '#000',
})

.add({
color: '#00FFF7',
})

.add({
color: '#D2BEFB',
})

.add({
color: '#171cff',
});

});
});

每個 add 函數代表動畫時間線中的一個動畫。 這些動畫適用於單個級別的每個字母。 您可以根據需要修改這些添加函數，添加新函數或刪除當前函數，只需確保最後一個添加函數用“;”正確關閉。 最後（如您在上面的代碼中所見）。 您可以在這些添加函數中添加不同的 CSS 屬性。 您可以在anime.js 文檔示例中找到有關屬性及其使用方式的更多信息。 在本教程中，我們特意添加了多個動畫來展示時間線的工作方式，但您可能希望為自己的項目使用更微妙或更短的動畫。

句子動畫

添加動畫的第一部分（分別針對每個字母）後，我們將轉到動畫的第二部分。 這部分將整個副本作為一個整體。 動畫方法同上； 我們將整個模塊放置在時間軸動畫中。 每個 add 函數代表該時間線內的不同動畫。 您可以修改這些添加功能、添加新功能或刪除當前功能。 確保將此新代碼放置在腳本代碼的結尾之前，您可以在下面的打印屏幕中看到。

anime.timeline({loop: false})

.add({
targets: '#headlineCopy',
lineHeight: '1em',
delay: '1500'

})

.add({
targets: '#headlineCopy',
translateX: ['-5%', 0],
letterSpacing: '-2px',
});

為 Span 添加自定義 CSS

現在，由於我們為每個字母創建了一個單獨的跨度，我們需要更改每個跨度的顯示屬性以允許字母彼此相鄰顯示。 為此，我們將向代碼模塊添加一些 CSS 代碼。 確保將代碼放在樣式標籤之間。

#headlineCopy span {
display: inline-block;
}

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何為標題創建高級文本動畫。 我們在 Divi 內部構建了整個設計，並將框架與 letterize.js 和anime.js 庫相結合。 如果您有任何問題或建議，請隨時在下面的評論部分發表評論！

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