Trois façons d'implémenter une animation de défilement dans WordPress : Plugins, Elementor et Tutoriels CSS

滚动动画为网站增添了动态效果，不仅让网页看起来更加吸引人，还能提升用户体验，你可能认为这是高级功能，但其实在 WordPress 中添加滚动动画非常简单。本文将介绍多种在 WordPress 中实现滚动动画的方法，包括使用plug-in (composant logiciel)和页面构建器（如 Elementor），以及使用锚标签répondre en chantant CSS 实现基础动画效果。

如何在 WordPress 中添加滚动动画？（不同方法）

Méthode 1 : Utiliser des plug-ins Scrollsequence

Scrollsequence 是一个专门用于创建滚动动画的插件。该插件faire passer (un projet de loi, une inspection, etc.)一系列静止图像实现动画效果，使用户在滚动时看到类似视频的播放效果。

déplacer: :

1. Installez et activez le plugin: :
   • Connectez-vous à votre tableau de bord WordPress et naviguez vers Plugins > Ajouter un nouveau plugin，搜索“Scrollsequence”，安装并激活插件。

2. 访问 Scrollsequence 菜单: :
   • 激活后，仪表板左侧将出现 Scrollsequence 选项，点击进入该菜单。

3. 准备动画: :
   • 使用一段短视频（5-10 秒），通过工具（如 Ezgif）将视频拆分为图像帧，上传这些图像。

4. 创建新的滚动动画: :
   • 在 Scrollsequence 菜单中点击“添加新滚动序列”，上传图像并设置动画顺序。
   • 设置场景: :
     • existent Scene 部分，可以添加多个场景（如果需要）。每个场景代表滚动序列的一部分。
     • 要添加更多场景，可以点击“Scene 0”旁边的 + Bouton.

4. 自定义动画设置: :
   • 调整动画的起始点、结束点、滚动方向等参数，选择动画类型（粘性或静态）。

5. 预览并保存: :
   • 点击预览，确认动画效果，最后点击发布并将生成的短代码粘贴到页面中.

Scrollsequence 插件适用于需要复杂滚动动画的场景，是构建互动效果的有效工具。

方法二：使用 Elementor 创建滚动动画

Elementor 是 WordPress 的一款流行页面构建器，使用Elementor Pro支持创建简单的滚动动画。下面是使用 Elementor 实现图片滚动动画的步骤：

1. 创建新页面并进入 Elementor 编辑: :
   • 在 WordPress 中创建新page web，点击“Utilisation de l'éditeur Elementor"Bouton.

2. 插入图片: :
   • 在 Elementor 编辑器中添加一个photographie模块，选择需要显示的图像。

3. 设置图像大小: :
   • 根据需要调整图片大小，确保其在屏幕上清晰可见。
4. 启用运动效果: :
   • 在图片模块的“高级”选项卡中找到“运动效果”选项，启用滚动效果。

5. 设置滚动方向: :
   • 选择“水平滚动”效果，将方向设置为“向右"ou"向左”，实现图像随页面滚动而移动。

6. 预览并发布: :
   • 向下滚动页面查看效果，确认无误后发布页面。

Elementor 的滚动效果适合简单的动画需求，需要使用Elementor Pro版本。

方法三：使用锚标签和 CSS 实现平滑滚动

如果仅需要简单的滚动跳转动画Vous pouvez utiliser le HTML 锚标签和 CSS 实现平滑滚动。

déplacer: :

1. 设置锚标签: :
   • 在页面中设置锚标签，为跳转目标内容添加唯一的 ID（如 id="section1").

2. 创建跳转链接: :
   • 在页面上创建链接，指向该锚标签。例如，<a href="#section1">跳转到部分</a>.

3. 添加平滑滚动 CSS: :
   • 在 WordPress 的“自定义 CSS”部分添加以下代码：

html { scroll-behavior: smooth; }

此代码将使页面滚动变得平滑，为用户带来更好的浏览体验。

rendre un verdict

滚动动画是提升 WordPress 网站用户体验、增强视觉吸引力的有效方法。通过插件 Scrollsequence、页面构建器 Elementor，以及简单的 CSS 平滑滚动，可以轻松地在网站中实现各种滚动动画效果。