Motion Effects 是一组强大的控件,用于为您的设计添加漂亮的过渡和动画。https://www.youtube.com/embed/2WO-jAHNURA?feature=oembed&enablejsapi=1&origin=https%3A%2F%2Felementor.com
到目前为止,想要合并动画和动作效果的网页设计师需要使用外部库和/或自定义代码。
Elementor Pro 2.5 提供了一个用于创建视差、动画和其他运动效果的一体化解决方案——所有这些都无缝集成到 Elementor 编辑器中。
滚动效果 #
当用户滚动页面时,使用 滚动效果创建令人惊叹的动画和交互。这是滚动效果的列表:
垂直滚动 #
这是您一直在等待的经典视差效果。垂直滚动使元素在滚动时以与页面不同的速度在您选择的方向和速度上移动。
水平滚动 #
水平滚动是指当访问者上下滚动时,元素会相应地左右移动。一个使用示例——当访问者向下滚动时,带有云的部分会向右移动。
透明度 #
透明度可让您逐渐使元素相对于访问者的滚动更透明或更明显。一个例子是有一个标题出现,然后根据滚动解散。
有4个可能的效果方向:
淡入 – 意味着元素从透明开始并逐渐变得可见。
淡出 ——元素从可见开始,逐渐变得透明。
淡入 – 元素开始为可见,然后淡出,然后再次变为可见。
淡入淡出 – 元素一开始是透明的,然后变得可见,然后再次透明。
模糊 #
此设置类似于透明度,只是元素变得模糊而不是透明度。一个很好的例子是背景图像,只有当用户向下滚动时才能获得正确的焦点。
旋转 #
在这里,当您滚动时,元素会旋转。在下图中的星星旋转中可以看到一个很好的例子:
注意: X 和 Y 锚点这两个设置决定了元素缩放或旋转的轴。如果将方向设置为左上,则旋转将围绕元素的左上点进行。如果设置方向 center-center,旋转将围绕其中心旋转,就像轮子一样。此设置仅与上述“旋转”效果以及下面列出的“缩放”效果相关。
规模 #
Scale 让您可以根据滚动来扩大和缩小元素。示例:滚动时增长的背景。
注意:使用“ 将效果应用到 ”来确定是否在移动设备、台式机或平板电脑上应用了运动效果。鼠标效果只会影响桌面设备。
鼠标效果 #
鼠标轨道 #
通过使元素相对于访问者的鼠标移动而移动来创建深度感。
3D倾斜 #
与 Mouse Track 相对于鼠标移动移动元素的方式类似,3D 倾斜效果根据光标的相同移动来倾斜元素。
运动效果浏览器兼容性 #
铬合金 | 火狐 | 苹果浏览器 | 歌剧 | 边缘 | IE浏览器 |
支持的 | 支持的 | 支持的 | 支持的 | 支持的 * | 不支持 |
* 稍微滞后的行为
注意:Elementor 尊重用户可以设置的“减少运动属性”偏好。如果用户设置了以下任何一项,则该用户的动作效果将被禁用:
- Mac:“系统偏好设置>辅助功能>显示”并选中/取消选中“减少运动”框
- iOS:“设置>常规>辅助功能”并打开/关闭“减少运动”
- Windows 10:“设置 > 轻松使用 > 显示 > 简化和个性化 Windows”
注意:在 Safari 中,如果您没有看到鼠标效果,或者您在 Safari 中遇到元素消失的问题,这是由于 WordPress 使用了旧的 jQuery 版本。在某些情况下,通过 Safari 查看鼠标跟踪效果可能会导致 jQuery 错误,从而导致元素消失,例如缺少轮播箭头。如果发生这种情况,您可能还会看到引用“超出最大调用堆栈大小”的错误。要解决此问题,请从具有运动效果的小部件中删除入口动画和/或从同时激活滚动和鼠标效果的区域中删除鼠标效果。