如何在 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 个最佳开源电子商务解决方案列表。