如何在 Elementor 中添加滾動動畫（如 Apple AirPods）

已發表: 2022-07-21

正在尋找一種在 Apple 和 Sony 在其網站上使用的 Elementor 中添加滾動動畫的方法？

雖然 Elementor Pro 通過其運動效果功能包含各種簡潔的動畫效果，但它不能讓您在滾動效果上創建真正引人入勝的圖像序列，就像您在 Apple 網站上看到的那樣（以及許多其他效果）。 例如， AirPods Pro 頁面。

使用 Scrollsequence 插件，您可以輕鬆地將這些類型的電影滾動動畫添加到 Elementor（包括 Elementor 的免費版本）。

很難用語言來描述，所以看看下面的例子（當訪問者向下滾動頁面時，動畫會移動）：

如果您想全面了解 Scrollsequence，可以閱讀我們完整的 Scrollsequence 評論。

不過，在這篇文章中，我們將特別關注如何使用 Scrollsequence 在 Elementor 中為滾動添加動畫。

讓我們深入挖掘！

如何使用 Scrollsequence 在 Elementor 中創建電影滾動動畫

以下是所涉及步驟的高級視圖——繼續閱讀詳細教程：

安裝 Scrollsequence 插件
創建你的動畫
將滾動動畫添加到 Elementor

1.安裝滾動序列插件

首先，您需要在 Elementor 網站上安裝 Scrollsequence 插件。

Scrollsequence 在 WordPress.org 上有一個免費版本，還有一個增加了更多功能的高級版本。免費版可讓您設置最多三個場景和每個場景最多 100 張圖像的基本動畫，而高級版則消除了所有限制，還添加了更高級的動畫和功能。

Scrollsequence - 電影滾動圖像動畫插件

Scrollsequence - 電影滾動圖像動畫插件

作者：Scrollsequence

當前版本： 1.2.7

最後更新： 2022 年 5 月 9 日

滾動序列.1.2.7.zip

98%評分1,000+安裝WP 5.0+需要

您還可以通過 14 天的免費試用免費試用所有高級功能，因此您無需支付任何費用即可進行測試。

如果您決定在試用後購買高級版，起價為 69.99 美元。但是，您可以使用我們的獨家 Scrollsequence 優惠券節省 20%：

20折優惠

滾動序列

使用 WPMAYOR20 優惠券獲得 Scrollsequence 的獨家 20% 折扣。在幾分鐘內創建您的滾動動畫。

使用 WPMAYOR20 優惠券獲得 Scrollsequence 的獨家 20% 折扣。在幾分鐘內創建您的滾動動畫。顯示較少

2. 創建你的動畫

安裝插件後，前往Scrollsequence → Add New Scrollsequence設置您的第一個滾動動畫。

每個動畫由一個或多個場景組成，每個場景將包含按順序排列的多個圖像。然後插件將根據序列中的所有圖像生成動畫。

“場景”是一個完整的動畫序列。如果您決定添加多個場景，用戶將在完全滾動完第一個場景的動畫後進入下一個場景。

在大多數情況下，您會希望將序列中的圖像基於基本視頻。要將現有視頻轉換為一系列單獨的圖像，您可以使用插件文檔中的這些工具之一。最簡單的選擇是基於瀏覽器的 Ezgif 轉換器，但使用專用軟件可以獲得更好的質量。

創建一個新動畫

創建場景並添加圖像

創建高級動畫後，單擊“添加場景”按鈕添加您的第一個場景。

這將擴展一組新選項，讓您上傳動畫序列的所有圖像。開發人員建議每個場景至少上傳 50-100 張圖像，以確保動畫流暢。

上傳圖像後，您可以使用排序選項來確保它們的順序正確。 如果它們的順序不正確，您的動畫將看起來不正確。

將圖像添加到場景以在 Elementor 中創建滾動動畫

如果要創建另一個場景，可以通過單擊“場景 0”選項卡旁邊的加號圖標來實現。

添加固定內容和動畫

要添加顯示在動畫圖像頂部的固定內容，您可以使用內容本身的固定內容框。

然後，您可以使用固定內容動畫部分來設置其動畫規則。我們在 Scrollsequence 評論的第 4 步中詳細介紹了這一點，但基本思想如下：

您將 CSS 選擇器添加到“固定內容”框中的內容（使用“文本”選項卡）。
您可以在Fixed Content Animation框中設置動畫規則，方法是定位那些 CSS 選擇器，然後選擇如何在這些選擇器中為內容設置動畫的時間。例如，您可以說要顯示圖像 30-55 的某些文本。

這是將 CSS 選擇器添加到您的內容的示例：

使用 CSS 添加內容

然後是設置動畫規則的樣子：

根據需要為內容製作動畫

除了為您的固定內容設置動畫外，您還可以調整圖像持續時間。

根據需要配置其他設置

設置場景、圖像和固定內容是創建動畫最重要的部分。

但是，Scrollsequence 還在此界面中為您提供了一些您可能想要探索的其他設置。

例如，您可以在場景設置區域的底部調整圖像比例和對齊方式。

您還可以在側邊欄的Scrollsequence Settings區域中獲得一些常規設置。在這個小部件中，您可以控製圖像寬度和滾動延遲，還可以根據需要添加自定義 CSS。

配置其他動畫設置

發布您的動畫

要完成任務，請單擊“發布”按鈕發布您的動畫，就像發布博客文章一樣。

發布後，您可以通過Scrollsequence → Scrollsequence找到此動畫的簡碼：

動畫短代碼

將此短代碼放在手邊，因為您將需要它在一秒鐘內在 Elementor 中添加滾動動畫。

3. 將滾動動畫添加到 Elementor

對滾動動畫感到滿意後，您就可以將其添加到 Elementor 設計中了。

您可以專門為滾動動畫創建單獨的 Elementor 設計。或者，您也可以將滾動動畫作為更大設計的一部分。在這種情況下，滾動動畫上方和下方的內容將保持靜態。

首先，為要添加滾動動畫的內容啟動 Elementor 編輯器。

然後，這是添加滾動動畫的方法：

在您希望滾動動畫出現的位置添加 Elementor 的 Shortcode 小部件。
粘貼動畫的簡碼（同樣，您可以通過Scrollsequence → Scrollsequence找到它）。
單擊 Shortcode 小部件設置中的Apply按鈕，讓 Elementor 在編輯器中生成動畫的實時預覽。

將動畫短代碼添加到 Elementor 編輯器。

您可以在不離開 Elementor 編輯器的情況下體驗完整的動畫——只需在視覺預覽中向下滾動！

就是這樣——你剛剛學會瞭如何在 Elementor 中設置電影滾動動畫，就像 Apple 使用它的許多登錄頁面一樣。

如果要創建其他動畫或向動畫添加新場景，只需重複上述步驟即可。

今天在滾動動畫上創建你的第一個 Elementor

人們喜歡 Elementor，因為它在創建設計時為您提供了很大的靈活性。

但是，Elementor本身無法做的一件事是設置您從 Apple 和其他公司看到的滾動動畫的電影類型。

通過將 Elementor 與 Scrollsequence 配對，您可以輕鬆地將這些類型的動畫添加到您的 Elementor 設計中。

如果你想嘗試一下，你有兩個選擇：

只需在 WordPress.org 上使用免費版本的 Scrollsequence。
使用 14 天免費試用訪問 Scrollsequence 中的所有高級功能。

如果您決定要使用高級版 Scrollsequence，您可以使用我們的獨家 Scrollsequence 優惠券來節省 20% 的訂單費用。

20折優惠

滾動序列

使用 WPMAYOR20 優惠券獲得 Scrollsequence 的獨家 20% 折扣。在幾分鐘內創建您的滾動動畫。

使用 WPMAYOR20 優惠券獲得 Scrollsequence 的獨家 20% 折扣。在幾分鐘內創建您的滾動動畫。顯示較少

您對如何在 Elementor 中的滾動上添加動畫還有任何疑問嗎？ 在評論部分給我們留言，讓我們知道您的想法。

分享，謝謝！

2022 年 6 個最佳 WordPress 潛在客戶生成插件（免費和專業版）

想為 WordPress 找到最好的潛在客戶生成插件嗎？查看我們專家挑選的最佳潛在客戶捕獲、Optin Form、Lead Magnet 和 Popup Builder 插件。

2022 年 9 個最佳 WordPress 搜索插件（免費和專業版）

您是否正在尋找最好的 WordPress 搜索插件？從我們的搜索欄、實時搜索和 WooCommerce 搜索的最佳插件列表中找出最好的 WordPress 搜索插件。

如何使您的 WordPress 網站符合歐盟 Cookie 法

在這個簡單的分步指南中了解什麼是 cookie，它們是如何使用的，如何使您的 WordPress 網站符合歐盟 Cookie 法。

WordPress 的 3 種最佳 IceGram 替代品（2022 年精選）

想要一個更好、更強大、更實惠的 Icegram 替代品嗎？我們不會將您與一打替代品混淆，而是這裡是最有效的前 3 個！

十大最佳開源電子商務平台

有這麼多可用的電子商務平台，很難選擇一個。查看我們列出的 10 個最佳開源電子商務解決方案列表。