雷拉克斯

视差是页面以不同速度滚动不同部分的效果,因此背景漂移速度比前景慢,并且部分拾取深度感。 雷拉克斯 扩展于 Elementor 的主插件 补充道 元素视差滚动 effect到任何元素,一个图像,一个标题,整个列,而不触摸一行javascript。它显示为元素的高级选项卡上的一个部分,具有速度,移动百分比,z索引和方向的控制。

Rellax 的生活地点、每个设置的操作以及页面上线后效果的样子。

Rellax 扩展的作用 #

Rellax 将基于滚动的动画固定到您选择的任何元素上,随着访问者的滚动,该元素的移动速度比页面其余部分更快或更慢,具体取决于您设置的速度。将其指向英雄图像和背景滑动;将其指向标题,文本在其周围的所有内容之前漂浮。由于它每个元素都有效,因此您可以在同一部分混合几个不同的速度并构建分层滚动,而无需专用的视差插件。

将其视为另外两个 Master Addons 运动工具的基于卷轴的表弟: 漂浮效果的,它本身就使元素动画化,而无需任何滚动,并且 转变处理旋转、刻度和倾斜。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态,如果您尚未安装,请按照 安装指南.
• 在主插件选项面板中启用了 Rellax 扩展。
• 要动画化的元素。任何元素管理器或主插件小部件都可以工作,包括图像,a 渐变标题的,或者一个节。

Elementor 中如何添加视差效应 #

选择要移动的元素。打开 高级 elementor 面板中的选项卡并向下滚动到 雷拉克斯 段(它带有紫色主插件徽章)。展开后翻转 启用 Rellax 到 是的.那个拨动是整个效果的开关,所以在它打开之前什么也不会发生。

Trips up 的一件事:视差只在 live 页面或预览中运行,绝不会在你在画布上编辑时运行,所以不要等待元素在编辑器内部移动,点击预览即可看到它。

Rellax 设置已解释 #

启用 Rellax 后,其余控件可塑造元素的行进方式:

• 速度: element 相对于滚动移动的速度,较高的正数使它向上移动的速度更快,而你向下滚动;负数则反过来推送它,demo 使用 64到6左右开始,并从那里调整,因为大值可以将元素从其部分中移出干净。
• 百分比: 动画的起点,从0到1,根据元素位于视口的位置。演示将其设置为 0.4。当效果太早或太晚启动时,轻推此项。
• Z 指数: 堆叠顺序,与 CSS z 索引的想法相同。提高它(演示使用 3)当视差元素需要位于邻居上方或下方时,它会与卷轴中间重叠。
• 垂直: page滚动时上下移动元素,这是通常的视差方向。
• 水平: lean向左移动, 而是向右移动。方便您想从侧面滑入的元素。

Speed 和 Percentage 旁边都有响应式图标,所以你可以为桌面、平板电脑和移动设备设置不同的值,这比听起来更重要,在宽桌面上看起来很棒的速度在手机上会让人感觉不和谐,屏幕很短,元素覆盖了很小的空间里很多地面,把移动速度调低通常是解决问题。

请参阅实时页面上的视差效应 #

页(或打开预览)并滚动,您启用 Rellax 的元素以自己的速度移动,而页面其余部分正常滚动,并且那个速度差是销售深度的演示英雄,与一个视差图像滚动对着一个“滚动 UP”标题:

如果动作感觉太强或太微妙,请回到速度控制并对其进行调整。视差是少数数字通常读数比大数字更好的效果之一。

常见用例 #

• 英雄背景: 给登陆页英雄图像一个缓慢的漂移,这样当有人滚动的那一刻,该部分就会感觉充满活力。
• 浮动标题: rellax放在一个标题上,这样它就会在它下面的内容之前上升。
• 分层部分: 为堆叠的多深度卷轴在同一部分中设置两个或三个元素以不同的速度。
• 功能呼叫: 当访客到达时,水平滑动图标或徽章。
• 讲故事页面: 在块之间使用轻柔的视差,以防止长卷轴感觉平坦。

对于与滚动无关的运动,请将 Rellax 与 配对 入口动画 so 元素在出现时动画化,然后在滚动继续时继续以视差移动 浏览完整内容 小部件和扩展 列出以查看运动工具包的其余部分。

视频教程 #

Prefer to watch?此视频从一个元素上启用到实时页面上的视差滚动, 一端到另一端地穿过Rellax扩展:

常见问题 #

包裹起来 #

Rellax 扩展是添加的最快方法 元素视差滚动 effect,没有单独的插件,没有自定义代码,在任何元素上启用,设置速度,百分比,z-index,方向,元素在live页面上滚动真实深度,更多移动屏幕周围东西的方法,看看 转变 並 漂浮效果并且检查 定价页面 pro 中包含的内容。