静态部分的读数就像平面图像,给它一个温和、循环的漂移,同样的元素感觉充满活力。 漂浮效果 扩展于 Elementor 的主插件 将连续运动添加到任何元素,无需关键帧或自定义 CSS 来编写。本指南解释了扩展的作用、您可以动画化什么以及如何应用它。
什么是浮动效应扩展? #
的 漂浮效果 extension 是一个元素器运动工具的主插件,它为任何元素器元素、部分、列或小部件添加连续的循环动画。它通过以下方式对元素进行动画处理 翻译, 旋转、和 规模 转换,并让您控制 持续时间, 延迟、和 方向 的运动。因为效果是基于CSS的,元素在没有重型JavaScript动画库的情况下不断自行漂移。
你可以动画什么 #
Floating Effects 通过三种变换类型进行工作, 您将它们与定时控制相结合来塑造运动:
- 翻译 —沿着X或Y轴移动元素,经典的上下或左右浮子。
- 旋转 —使元素稍微来回转动,轻轻摇摆。
- 规模 —生长和收缩元素以产生软脉冲效果。
- 持续时间、延迟和方向 —设定一个循环需要多长时间,等待多长时间才能开始,以及动作以何种方式运行,因此动画与该部分的节奏相匹配。
如何在元素器中添加浮动效果 #
Elementor 编辑器中每个元素应用浮动效果,一旦在主插件中启用扩展,简而言之:选择要动画化的元素,打开其设置,打开浮动效果,并选择一个带有其时序的变换。
- 确保 Elementor 的主插件 已安装并处于活动状态,并且在主插件面板中启用了"浮动效果"扩展。
- Elementor 编辑器中, 选择要动画化的部分、列或小部件。
- 打开元素的设置并找到主插件 漂浮效果 控制,然后打开效果。
- 挑一变身— 翻译, 旋转、或者 规模 —并设置 持续时间, 延迟、和 方向.
- 预览或发布页面以查看实时网站上的元素漂移。
使用浮动效果的技巧 #
- 保持动作微妙。 翻译距离小,持续时间慢,读作抛光;大而快速的动作看起来分散注意力。
- 每个视图使用一两个元素。 单个漂浮的英雄图像或图标吸引了人们的目光;整页的运动与自身竞争。
- 将其与入口运动配对。 将浮动效果与 入口动画 扩展,使元素首先放松,然后保持平缓的漂浮。
- 在手机上查看。 确认该机芯在较小的屏幕上仍然看起来不错,并且不会将附近的内容推到周围。
常见问题 #
Master Addons 中的 Floating Effects 扩展是什么?
Floating Effects 是 Elementor 运动扩展的主插件,它为任何 Elementor 元素添加了连续、循环的动画。它使用平移、旋转和缩放变换,让您控制运动的持续时间、延迟和方向,所有这些都无需编写自定义 CSS 或关键帧。
Floating Effects 可以制作什么样的动画?
持平移来上下或左右移动一个元素,旋转来回轻柔的摇摆,缩放来达到柔和的脉动效果三种变换类型,可以将变换与时序设置结合起来,塑造出你想要的精确运动。
我可以控制浮动动画的速度和方向吗?
Yes。每个效果都暴露持续时间、延迟、方向控制。持续时间设置一个周期需要多长时间,延迟设置运动开始前等待多长时间,方向设置动画运行的方式,这样就可以将浮点符与该部分的节奏相匹配。
浮动效应适用于任何元素元素吗?
是扩展适用于 Elementor 部分、列和小部件,因此您可以浮动图像、图标、标题、按钮或整个部分。一旦扩展在主插件面板中打开,您就可以从 Elementor 编辑器启用每个元素。
浮动动画会减慢我的网站速度吗?
CSS 为基础的效果,所以与重 JavaScript 动画库相比,它具有轻量级,要保持页面流畅,只需在每个视图的一两个元素上使用它,并保持移动微妙,而不是一次性在页面上动画化所有内容。
