如何在 Elementor 中添加视差滚动效果
您需要 Elementor 和活跃的 硕士插件专业版 许可证。
- 去 主插件、扩展打开 Rellax 并保存。
- Elementor编辑您的页面,然后选择要移动的小部件,例如图像、图标或形状。
- 打开该元素的 Rellax 设置并打开 启用 Rellax.
- 设置速度,例如慢漂移的 -2,并针对平板电脑和移动设备进行调整。
- 选择垂直或水平并设置 Z 索引,以便该层不覆盖您的文本。
- 预览页面并滚动以检查动作。
更多细节请参见 Rellax 扩展设置.
速度、百分比和方向
速度 0.1步从-10运行到10,每台设备都可以设置,负值使元素移动速度比页面慢,因此感觉更远,正值移动速度更快,因此感觉更近。 百分比 (0 到 1) 设置元素在移动开始时所在的位置,并且 垂直 並 水平 选项选择方向。
- 1到-2的缓慢漂移,以获得英雄身后的装饰形状。
- 内容前面浮动图标的小正速度。
- 如果小屏幕上的运动感觉太强,则移动速度较低或为 0。
使用 Z 索引分层
视差层可以在文本和按钮上滑动。 Rellax 添加了一个 Z 索引 1到50的设置,所以你可以在你的内容下方保留一个移动的背景层,并在其上方保留一个前景形状,rellax移动的是整个元素,而不是它的背景图像,所以把你想要移动的图像放在自己的图像小部件中。
- 对于应位于内容后面的图层,使用 -1。
- 将标题和按钮排除在移动图层的路径之外。
- 发布前在真实手机上测试滚动。
元素运动效果与主插件 Rellax
Elementor Pro已经有了带有滚动效果的运动效果,下面是两者对比的。
| 特点 | 元素职业运动效果 | 主插件 Rellax |
|---|---|---|
| 价格 | 需要 Elementor Pro | 需要 Master Addons Pro |
| 滚动运动 | 具有速度和视口范围的垂直和水平滚动 | Rellax。js 的速度从 -10 到 10,垂直或水平 |
| 其他滚动效果 | 透明度、模糊、旋转和比例 | 没有,只有运动 |
| 小鼠效应 | 鼠标轨道和 3D 倾斜 | 否 |
| 背景视差 | 背景运动对截面和容器的影响 | 移动整个元素 |
| 每个设备的设置 | 选择效果运行的设备 | 每个设备的速度 |
Elementor Pro 的话,运动效果涵盖了更多的效果类型,Rellax 在使用 Master Addons Pro 时适合简单的基于速度的图层,不依赖于滚动的循环运动请参见 漂浮效果 (专业版)。
什么是 Rellax.js?
Rellax。js 是 Dixon 和 Moe 创建的一个小型开源 JavaScript 库,它使元素在页面滚动时以不同的速度移动。在手工编码的网站上,您可以添加脚本,为元素提供 rellax 类,并在代码中设置速度、百分比、z 索引和方向等选项。
Master Addons Pro 内部的 Rellax。js 捆绑在一起,并将这些选项映射到 Elementor 控件,因此您从面板设置速度、百分比、Z 索引和方向。脚本仅加载到元素使用 Rellax 的页面上。如果您不在 Elementor 上,请直接使用 Rellax。js 库。
Rellax 的常见问题
视差效应会在移动设备上发挥作用吗?
是。速度可以单独设置为平板电脑和移动设备,所以如果感觉运动太强,可以在手机上使用较小的值或0。始终在真实设备上进行测试。
我可以移动部分背景图像吗?
Rellax移动整个元素,而不是背景图像,将图像放在自己的Image小部件中的内容后面,然后将Rellax添加到该小部件中,或者使用Elementor Pro的背景运动效果来进行移动部分背景。
Rellax 扩展是免费的吗?
No。 Rellax 是其中的一部分 硕士插件专业版。Rellax。js库本身是免费的,开源的,如果你添加自己的代码。
过多的视差效应会减慢我的网站速度吗?
They can。每一个移动的元素都让浏览器在滚动的同时做更多的工作。在每页几个关键元素上使用视差,并保持适度的速度。
![Master Addons 元素的帖子/页面复制器扩展:WordPress 页面列表中的 MA 复制器行链接创建着陆页 - [Duplicated #128] 草案](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
