视差是页面以不同速度滚动不同部分的效果,因此背景漂移速度比前景慢,并且部分拾取深度感。 Rellax 扩展 在 硕士插件专业版 补充道 元素视差滚动 件(如图像或标题)的效果,使用 Rellax。js 库,无需触摸 JavaScript 行。它显示为元素高级选项卡上的一个部分,具有速度、移动百分比、z 索引和方向的控制。
Rellax 的生活地点、每个设置的操作以及页面上线后效果的样子。
Rellax 扩展的作用 #
Rellax 将基于滚动的动画固定到您选择的任何元素上,随着访问者的滚动,该元素的移动速度比页面其余部分更快或更慢,具体取决于您设置的速度。将其指向英雄图像和背景滑动;将其指向标题,文本在其周围的所有内容之前漂浮。由于它每个元素都有效,因此您可以在同一部分混合几个不同的速度并构建分层滚动,而无需专用的视差插件。
将其视为另外两个 Master Addons 运动工具的基于卷轴的表弟: 漂浮效果的,它本身就使元素动画化,而无需任何滚动,并且 转变处理旋转、刻度和倾斜。
在开始之前 #
- 文字出版社 与 元素 已安装并处于活动状态。
- 硕士插件专业版 active许可证安装的,因为rellax是pro扩展,如果还没有安装的话,按照 安装指南.
- 在主插件选项面板中启用了 Rellax 扩展。
- 要动画的小部件,例如图像、图标或小部件 渐变标题。Rellax 移动整个小部件,而不是部分背景图像。
Elementor 中如何添加视差效应 #
选择要移动的元素。打开 高级 elementor 面板中的选项卡并向下滚动到 雷拉克斯 段(它带有紫色主插件徽章)。展开后翻转 启用 Rellax 到 是的.那个拨动是整个效果的开关,所以在它打开之前什么也不会发生。
Trips up 的一件事:视差只在 live 页面或预览中运行,绝不会在你在画布上编辑时运行,所以不要等待元素在编辑器内部移动,点击预览即可看到它。
Rellax 设置已解释 #
启用 Rellax 后,其余控件可塑造元素的行进方式:
- 速度: element 相对于滚动移动的速度,较高的正数使它向上移动的速度更快,而你向下滚动;负数则反过来推送它,demo 使用 6 X 1000 1000 1000 1000 1000 1000 1000 1000 1000 1000 1000 1000 4到6左右开始,并从那里调整,因为大值可以将元素从其部分中移出干净。
- 百分比: 动画的起点,从0到1,根据元素位于视口的位置。演示将其设置为 0.4。当效果太早或太晚启动时,轻推此项。
- Z 指数: 堆叠顺序,与 CSS z 索引的想法相同。提高它(演示使用 3)当视差元素需要位于邻居上方或下方时,它会与卷轴中间重叠。
- 垂直: page滚动时上下移动元素,这是通常的视差方向。
- 水平: lean向左移动, 而是向右移动。方便您想从侧面滑入的元素。
Speed 和 Percentage 旁边都有响应式图标,所以你可以为桌面、平板电脑和移动设备设置不同的值,这比听起来更重要,在宽桌面上看起来很棒的速度在手机上会让人感觉不和谐,屏幕很短,元素覆盖了很小的空间里很多地面,把移动速度调低通常是解决问题。
请参阅实时页面上的视差效应 #
页(或打开预览)并滚动,您启用 Rellax 的元素以自己的速度移动,而页面其余部分正常滚动,并且那个速度差是销售深度的演示英雄,与一个视差图像滚动对着一个“滚动 UP”标题:
如果动作感觉太强或太微妙,请回到速度控制并对其进行调整。视差是少数数字通常读数比大数字更好的效果之一。
常见用例 #
- 英雄形象: 给登陆页面英雄中的图像小部件缓慢漂移,以便当有人滚动时该部分感觉充满活力。
- 浮动标题: rellax放在一个标题上,这样它就会在它下面的内容之前上升。
- 分层部分: 为堆叠的多深度卷轴在同一部分中设置两个或三个元素以不同的速度。
- 功能呼叫: 当访客到达时,水平滑动图标或徽章。
- 讲故事页面: 在块之间使用轻柔的视差,以防止长卷轴感觉平坦。
对于与滚动无关的运动,请将 Rellax 与 配对 入口动画 so 元素在出现时动画化,然后在滚动继续时继续以视差移动 浏览完整内容 小部件和扩展 列出以查看运动工具包的其余部分。
视频教程 #
Prefer to watch?此视频从一个元素上启用到实时页面上的视差滚动, 一端到另一端地穿过Rellax扩展:
常见问题 #
如何在 Elementor 中添加视差滚动效果?
选择一个元素,打开高级选项卡,展开主插件 Rellax 部分,并将启用 Rellax 设置为是,然后设置速度和百分比。元素在实时页面上按照自己的节奏滚动,无需代码。
Elementor编辑器中为什么看不到视差效应?
Rellax 只在前端运行,元素静止不动,当你在画布上编辑时,所以打开预览或查看已发布的页面,就可以看到视差运动。
Rellax 中的速度设置有什么作用?
Speed 控制元素相对于页面滚动的移动速度,更高的正值会随着向下滚动而更快地向上移动,负值会反转方向,4 到 6 左右的值对于大多数英雄部分来说效果很好。
我可以在移动设备上使用不同的视差速度吗?
是。速度和百分比控件响应灵敏,因此您可以为桌面、平板电脑和移动设备设置单独的值。降低移动设备上的速度可以防止在小屏幕上感觉过于激进。
Rellax 扩展会减慢我的网站速度吗?
Rellax每个元素运行一个基于滚动的动画,所以影响保持很小,只应用到需要它的元素,而不是页面上的每个块,事情保持平稳。
包裹起来 #
Rellax 扩展是添加的最快方法 元素视差滚动 effect,没有单独的插件,没有自定义代码,在任何元素上启用,设置速度,百分比,z-index,方向,元素在live页面上滚动真实深度,更多移动屏幕周围东西的方法,看看 转变 並 漂浮效果,并看到 Rellax 视差扩展页 用于与 Elementor Pro Motion Effects 进行比较。
