Elementor 入口动画:适用于任何元素的 70 种滚动效果
第一印象坚守。与其让您的内容刚刚出现,不如让它到达。 入口动画 扩展是 Master Addons Pro 的一部分,当任何元素元素滚动到视图中时,它都会向其添加运动 70种效果 要从以下选项中进行选择:淡入淡出、幻灯片、蒙版、旋转、缩放、翻转、脉冲和弹跳 您设置持续时间、延迟、缓和和重复计数,因此一个标题可以轻轻地漂入,同时一排功能图标会连续弹出。没有 CSS,没有关键帧,只有高级选项卡中的几个设置。
Use it well and a entry animation trussing eye down the page and make the site feel at the first scroll。, use it on everything and it curned into noise。,下面视频涵盖了基础知识,再往下走,我进入了完整的效果列表,如何在整个部分应用一个动画,以及如何正确获取时机。
什么是入口动画?
动(incention animation)是一个元素在屏幕上时所做的运动,访问者滚动,标题或图像或按钮击中视口,它会褪色、滑动或弹跳到位,而不是一直坐在那里,你会看到它们称为入口效果、滚动动画或网站入口动画。每次的想法都相同:一个静态页面,当你向下移动时,它会开始做出反应。
CSS动画就可以自己写这一切,那么关键帧就是你要维护的,每个屏幕大小的响应行为也是你要维护的,Master Addons 动画工具包 将其移动到元素设置中,以便您从下拉中选择效果并跳过代码。
70个入口效果的图书馆
70个预设, 有一个合适的方式来介绍几乎任何一个部分, 想要它安静, 淡入淡出想要能量, 弹入或杰克在盒子里, 经过一些更深思熟虑的事情, 翻转进来或面具从那个传播让你给各部分自己的性格:平静和顺利的任务陈述, 有点有趣的特性行。
- 褪色: 淡入,加上向上、向下、向左和向右,并有编号变化,适合安静的到达。
- 幻灯片和面具: 从四个方向滑动和遮罩。
- 旋转和翻转: 向每个角旋转,然后向上、向下、向左和向右翻转。
- 缩放和缩放: 放大、放大和缩小,每个都有变化。
- 注意效果: 英雄或 CTA 的 Pulse In、Pulse Out、Shake、Bounce In 和 Jack In the Box。
- 将效果与工作相匹配: 行动号召时声音洪亮,正文轻柔淡入淡出。
- 提交前预览: 编辑器一挑选效果就会立即播放。
持续时间、延迟和缓解控制
时机是大多数动画获胜或失败的地方,这不仅仅是开/关切换。设置 持续时间 以毫秒为单位快速快速地移动或缓慢而拖延。添加一个 延迟 suo以一排物品接连进来,而不是一次全部进来,pick一个 缓和 弯曲,使运动以真实物体的方式加速和减慢,而不是以平坦的机器人速度滑动。
- 设置速度: 500ms感觉轻快,1500ms感觉轻松,那个数字改变整个心情。
- 交错序列: 将"延迟"连续按每个图标上的一个凹口进行碰撞,然后它们会一一弹出。
- 选择宽松政策: Ease-Out(快速启动,温和停止)读作自然的大多数入口,这是我首先到达的。
- 重复一遍: 重复计数可播放效果 1 至 5 次,或循环播放。
Elementor 的内置入口动画 vs Master Addons
Elementor已经让你在高级,运动效果下免费选择一个入口动画。对于简单的淡入淡出就可以了。Master Addons扩展适用于你想要更精细地控制每个元素如何到达的页面。
| 元素运动效应 | 主插件入口动画 | |
|---|---|---|
| 计划 | 免费的 | 硕士插件专业版 |
| 持续时间 | 慢、正常或快速 | 任何值(以毫秒为单位) |
| 延迟 | 毫秒 | 毫秒 |
| 缓和 | 不可用 | 30条曲线,从线性到后进出 |
| 重复计数 | 不可用 | 1到5倍,或者是无限的 |
| 每个设备效果不同 | 是的 | 不,所有断点都有一个设置 |
| 效果 | 元素预设 | 70种效果,包括掩模、翻转和脉冲 |
如何为所有元素设置默认入口动画?
Elementor中,人们会问很多:你能不能一次性将一个入口动画应用于所有内容?直接回答,Elementor核心没有一个全局开关,可以为站点上的每个元素制作动画。在实践中有效的是在容器或部分级别进行动画,然后重复使用那些设置。
- 选择 部分或容器 而不是其中的每个小部件。打开 高级→主插件入口动画 并选择你的效果。然后,当它滚动时,整个块一起到达。
- 要重复使用相同的动作,请右键单击元素,点击 复制那么 粘贴风格 on the next section。动画设置随着样式一起骑行,所以你设置一次,然后将它粘贴到页面上。
- 对于级联而不是所有东西一起发射,保持效果相同并升高 延迟 当你向下走时,每个部分都有一点。
这会让您在所有元素上获得一致的入口动画,而无需触摸代码,这与 Elementor 给您的默认值一样接近。
入口动画对哪里最有帮助?
- 英雄部分: 标题上出现"淡入淡出",然后在其下方的按钮上出现短暂延迟。
- 特色行: 交错图标,使它们一一落地。
- 统计数据和计数器: 当数字滚动到视图中时放大。
- 感言和徽标: 柔和的褪色,这样它们就不会突然卡住。
- 呼吁采取行动: 在有人决定时弹跳或杰克在盒子里。
入口动画是其中的一部分 硕士插件专业版.超越第一卷的运动,看 漂浮效果, 揭露 並 转变的,或者浏览完整内容 Master Addons 动画功能.
入口动画常见问题
很多入口动画会减慢我的网站速度吗?
在包含数十个动画元素的页面上,它可以增加一些重量,但效果一开始就很轻。真正的解决办法是克制:对关键部分和标题进行动画处理,而不是每一段。几个位置良好的部分几乎无法注册。如果您想到了加载时间,这些 加快 Elementor 网站速度的提示 帮助。
为什么我的 Elementor 入口动画不起作用?
3样东西,通常都是其中之一,动画只在元素第一次进入视口时才开火,所以新鲜向下滚动测试它,而不是向上滚动,确保效果在实际元素上,而不是在它周围有一个空包装,并在你发布后清除你的缓存插件,因为缓存的页面将服务于没有动画的旧版本。
我可以在桌面和移动设备上使用不同的动画吗?
Not with this extension。its 设置适用于每个断点,所以选择一个在小屏幕上仍然看起来正确的效果。Elementor 自己的 Motion Effects 入口动画可以设置为每个设备,如果手机布局需要更平静的东西,这会有所帮助。
这与 Elementor 自己的入口动画有何不同?
Elementor的免费编辑器在高级,运动效果下有一个基本的入口动画控制,具有预设的持续时间和延迟,此扩展是Master Addons Pro的一部分,为您提供70个效果,持续时间和延迟毫秒,30个缓和曲线和重复计数,对于节奏,轻松出局适合大多数入口。
