如何在WordPress网站中添加滚动动画？

效果和动画有助于使网站栩栩如生。它们不仅使它们看起来令人惊叹，而且还增强了用户体验，这是最重要的 Google 搜索引擎排名信号之一。

您可能认为这很棒，但超出了您的能力范围。但事实是，这不仅是可能的，而且您只需点击几下即可为您的 WordPress 网站创建滚动动画。

在这篇博客中，我们将帮助您尽可能轻松地学习如何在 WordPress 中添加滚动动画。

因此，请继续关注并阅读这篇文章直到最后。

但在此之前，让我们了解一下在 WordPress 中添加滚动动画有哪些好处。

在 WordPress 中添加滚动动画的好处

如果您仍然想知道为什么应该在 WordPress 中添加滚动动画，请查看下面提到的优点或好处：

1. 增强用户参与度

滚动动画可以吸引注意力并让访问者在浏览您的网站时保持参与。淡入淡出的文本或移动图像等动态元素可创建交互式体验，鼓励用户进一步滚动并在页面上花费更多时间。

2. 改进的用户体验（UX）

动画可以引导用户以流畅、直观的方式浏览内容。通过逐渐显示信息或突出显示关键部分，滚动效果使导航变得更轻松、更愉快，从而提高整体用户满意度。

3. 增加视觉吸引力

添加滚动动画可以让您的网站具有现代和专业的外观。微妙的过渡和动画可以使您的设计更具活力，帮助您的网站从竞争对手中脱颖而出。

4. 讲故事的机会

滚动动画可以创造性地讲述故事。您可以以逻辑、视觉上引人注目的顺序呈现信息，这有助于更有效地传达您的信息，并使访问者与您的内容保持互动。

5. 适合移动设备的交互

滚动动画增强了移动交互，使其更流畅、更具吸引力。尤其是移动用户，可以受益于响应其手势的直观设计元素，从而改善移动体验。

6. 搜索引擎优化的好处

由于动画可以提高用户参与度并延长在网站上停留的时间，因此它们间接支持 SEO 工作。较低的跳出率和较高的用户互动可以向搜索引擎表明您的网站提供有价值的内容，从而帮助提高您的排名。

7. 专业品牌

滚动动画体现了更高水平的专业精神，符合现代网页设计趋势。如果有策略地使用，它们可以强化您的品牌形象并使您的网站更令人难忘。

8. 对用户的微妙引导

滚动动画可以突出显示号召性用语 (CTA)、直接关注重要部分或引导用户浏览网站上的特定路径。这种微妙的导航帮助可以帮助提高转化率。

现在让我们看看如何做到这一点。

使用 WordPress 插件在 WordPress 中添加滚动动画

在 WordPress 中添加滚动动画的最简单方法之一是使用名为Scrollsequence的插件。

虽然除了 Scrollsequence 之外还有其他 WordPress 插件可用，但我们发现它是最稳定且功能丰富的。

因此，在这个博客中，我们选择它来向您展示如何在 WordPress 中添加滚动动画。

以下是供您遵循的分步方法：

第1步：安装插件并激活

• 转到您的 WordPress 管理仪表板：
  首先，登录您的 WordPress 网站 >在插件部分搜索“Scrollsequence” > 安装免费版本 > 安装后激活插件。

第 2 步：访问滚动序列菜单

• 找到新的滚动序列选项：
  激活插件后，再次查看仪表板的左侧。您应该看到一个标记为Scrollsequence 的新选项。
• 单击此菜单：
  单击滚动序列。这将带您进入一个新区域，您可以在其中设置和自定义动画。您还可以找到解释如何使用它的有用教程。

第 3 步：准备动画

• 了解滚动序列的工作原理：
  Scrollsequence使用一系列静止图像（有点像翻页书）创建动画，使其在用户向下滚动页面时看起来像视频。
• 将您的视频转换为图像：
  要创建动画，首先，您需要一个短视频（大约 5-10 秒长）。使用Ezgif等免费工具将此视频转换为单独的图像帧（JPEG 格式）。这意味着您将从视频中获得几张图片，Scrollsequence 将使用这些图片来创建动画。

第四步：创建一个新的滚动动画

• 开始一个新的滚动序列：
  在“滚动序列”菜单中，查找显示“添加新滚动序列”的按钮，然后单击它。
• 添加场景：
  单击添加场景。将出现一个下拉菜单，您可以在其中选择要用于动画的图像序列。

• 上传您的图片：
  现在，上传您从视频中获得的图像。这可能需要一些时间，具体取决于您的互联网速度。

第 5 步：自定义动画

• 调整动画设置：
  上传所有图像后，您可以更改一些设置。您可以在滚动时选择动画开始和结束的时间。
• 选择动画类型：
  决定是否希望动画保留在一处（粘性）或随着用户向下滚动页面而移动（静态）。

第 6 步：预览并保存

• 检查你的动画：
  在完成一切之前，单击预览按钮查看动画的外观。
• 发布您的动画：
  如果您喜欢所看到的内容，请单击“发布”按钮以使您的动画出现在您的网站上。

第 7 步：在您的网站上使用动画

• 获取简码：
  发布后，返回滚动序列菜单。您将找到新动画的短代码（特殊代码）。

• 粘贴简码：
  复制此短代码并将其粘贴到您希望显示动画的任何页面或帖子中。您可以在同一页面上添加任意数量的动画

现在您的 WordPress 网站有了有趣的交互式滚动动画！

使用 Elementor 在 WordPress 中添加滚动动画

在上面的方法中，我们使用了视频而不是图像，但在这个 Elementor 方法中，我们将采用不同的方法。

当用户向下滚动页面时，图像将从屏幕的一侧移动到另一侧。下面介绍了如何使用 Elementor 使用静态图像而不是视频来实现此目的。

第 1 步：创建一个新页面

• 首先在您的 WordPress 网站上创建一个新页面。

第 2 步：使用 Elementor 进行编辑

• 单击使用 Elementor 编辑。 Elementor 是一个页面构建器，可帮助您轻松设计页面。

第 3 步：插入图像

• 进入 Elementor 编辑器后，查找将图像插入页面的选项。
• 提示：动画在透明图像上效果最佳。您可以使用 PNG（支持透明度）或SVG 文件（也是矢量格式）。

第四步：设置图像大小

• 调整图像的大小。确保它足够大，以便人们在滚动时可以注意到移动。例如，您可以将其设置为中等尺寸，即大约300 x 300 像素。

第 5 步：选择图像

• 单击刚刚添加的图像将其选中。

第 6 步：访问高级设置

• 在 Elementor 编辑器左侧的设置中查找“高级”选项卡。

第7步：启用运动效果

• 向下滚动找到“运动效果” 。
• 打开滚动效果。这将允许您为图像添加动感。

第8步：设置水平滚动方向

• 由于您希望图像在页面上移动，因此请查找标记为Horizo​​ntal Scroll 的选项。
• 将方向设置更改为向右。这意味着当用户向下滚动页面时图像将从左向右移动。

第九步：测试效果

• 向下滚动页面以查看图像如何移动。这是一个简单的示例，但它向您展示了创建引人入胜的效果是多么容易。

附加说明

• 您还可以使用Scrollsequence插件在 Elementor 中添加类似的滚动动画。
• 如果您有Elementor Pro ，它包含用于粘性滚动效果的内置功能，但与其他选项相比，这可能更有限。

使用 Divi 在 WordPress 中添加滚动动画

如果您不是 Elementor 用户，而是使用 Divi，您仍然可以创建类似的效果。

以下是您可以如何做到这一点。

例如，我们正在考虑一个足球网站

第 1 步：创建一个新页面

您需要做的第一件事是创建一个新页面并选择 Divi Page Builder。这将允许您使用 Divi 的功能来设计您的页面。

第 2 步：选择布局（可选）

• 现在，为了让事情变得更快一点，请选择 Divi 的预制布局。例如，选择网球训练场地的布局。

第 4 步：添加您的图片

• 要创建滚动效果，您需要一张图像。在此示例中，您将使用分数图像。
• 确保乐谱图像具有透明背景（PNG 格式效果最佳）。将此图像上传到您的页面。

第 5 步：访问图像设置

• 单击您刚刚添加的乐谱图像以打开其设置。
• 在设置菜单中查找“高级”选项卡。

第 6 步：启用滚动效果

• 在“高级”设置中，找到“滚动效果”部分。
• 您会看到不同的滚动效果选项。

第 7 步：选择效果

• 选择您想要的效果。
• 此外，启用水平运动效果，使乐谱图像在用户向下滚动时从屏幕的一侧移动到另一侧。

第 8 步：测试你的滚动运动

• 设置效果后，向下滚动页面即可查看乐谱图像如何移动。

第 9 步：保存您的更改

• 一旦您对它的外观感到满意，请确保保存您的更改。
• 然后，单击“发布”以使您的页面具有新的滚动效果。

使用锚标记和 CSS 在 WordPress 中添加基本且平滑的滚动动画

此方法不提供在 WordPress 中添加滚动动画的奇特选项，但它可以帮助您以最简单的方式向 WordPress 网站添加简单的动画。

为此，您需要使用锚标记，锚标记通常用于帮助访问者跳转到同一页面上的特定内容。然而，问题是默认情况下，滚动动画看起来笨重或突然。

但我们可以让这个动作变得流畅，给读者一种动画卷轴的感觉，而不是突然跳跃的感觉。

以下是您可以如何做到这一点。

第 1 步：设置锚标记：您首先需要创建页面的一个部分以“跳转到”。这是通过在 HTML 锚点字段中添加一个单词（锚点标签）来完成的，该字段充当链接的目标。

步骤 2 ：创建链接：将锚标记链接到页面上的某些文本或按钮。该链接应使用主题标签，后跟锚文本（例如#section1）。

步骤 3 ：发布页面：当您发布页面时，单击链接会将您带到锚标记，但可能会感觉很唐突。

步骤 4 ：通过平滑滚动修复它：为了使滚动平滑，您可以在 WordPress 的“附加 CSS”部分添加一小段 CSS 代码（滚动行为：平滑）。

html{
scroll-behavior: smooth;
}

此代码使滚动运动渐进且视觉上令人愉悦，就像它是动画一样。

再次发布页面后，单击链接将导致平滑的动画滚动到锚点，而不是突然跳转。

结论

现在您已经了解到，向 WordPress 网站添加滚动动画不需要任何特殊的技术技能或开发人员帮助。一个简单的插件或页面构建器足以帮助您在几分钟内创建动态且有吸引力的页面。

为了获得最佳结果，您还可以结合上述方法来获得更好的结果，吸引并留住更多网站流量。

如果您有任何疑问或想分享您的宝贵意见，请在下面的评论部分告诉我们。

拉胡尔

Rahul Kumar 是一位网络爱好者和内容策略师，专门从事 WordPress 和网络托管。凭借多年的经验和对了解最新行业趋势的承诺，他制定了有效的在线策略来增加流量、提高参与度并提高转化率。拉胡尔对细节的关注以及制作引人入胜的内容的能力使他成为任何希望提高其在线形象的品牌的宝贵资产。