入口动画

一切都坐在那里的页面读起来像 PDF。当您到达部分时,部分轻松进入的页面感觉已经建成。 入口动画 扩展于 Elementor 的主插件 将该运动添加到任何元素:从 40 多个动画库中选择效果,设置时间,元素在滚动到视图的那一刻就会动画化。

Here 是在真实页面上的效果, 每个部分在进入视口时都会淡入上升:

Entrance Animation 扩展名的作用 #

启用后,每个元素元素都会获得一个 入口动画 下节 高级 tab。在那里分配一个动画,元素开始隐藏,然后在访问者滚动到它时播放其效果。部分,容器,标题,图像,按钮:编辑器中的任何东西都可以携带自己的入口。

动画库涵盖了全方位的入口风格:

• 淡入 系列:普通、下、上、左和右,每个系列都有改变旅行距离的编号变化。
• 从滑动 右、左、上、下。
• 面具来自 上、下、左、右,擦除元素。
• 旋转进去 每个角落都有向下和向上变体。
• 放大 並 向上缩放/向下缩放 家庭的深度。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。插件新增?关注 安装指南 首先。
• Entrance Animation 是免费扩展,因此不需要 Pro 许可证。

如何启用入口动画扩展 #

从您的 WordPress 仪表板,转到 主插件 并打开 扩展 tab。入口动画领先 动画小部件 hot徽章的组,在变身和揭秘旁边,点击它的切换,这样它就会变成紫色,然后点击 保存更改 并等待绿色“设置保存成功”通知。

选择元素的动画 #

在 Elementor 编辑器中选择元素,打开 高级 选项卡,并展开 入口动画 带有紫色 MA 徽章的部分。 动画 dropdown 保存整个库。在演示中,英雄部分获得淡入淡出效果,而下拉显示淡入淡出、幻灯片、蒙版、旋转、缩放和缩放组滚动过去。

Pick one,小编马上预览,可以翻转选项,直到动作符合内容,Fade In Up是安全默认:微妙的升降,没有戏剧性,几乎适用于任何东西。

调时机 #

动画下拉下方有四个计时控件。

• 持续时间(毫秒): 动画运行多久。演示使用夸张的 5000ms,因此很容易看到动作;在制作页面上,400 到 800ms 通常感觉正确。
• 延迟(女士): 效果开始前的一个暂停,演示中 400ms。跨兄弟元素的交错延迟,它们相继进入,而不是同时进入。
• 宽松: 加速度曲线。默认有效,但出入口更容易着陆。
• 重复计数: 效果播放多少次。

页面上的结果 #

Publish 和滚动。每个元素保持直到进入视口,然后播放其入口:功能列表上升到位,服务卡以一排方式消失,到达时团队部分跟随。此页面顶部的动画 GIF 显示来自演示站点的确切顺序。

One causter from practice:动画版块,而不是其中的每一个小部件。一个页面,每个页面从某个地方飞入五十个元素,读作噪音。每个部分一个入口保持节奏。

入口动画效果良好的地方 #

• 英雄部分。 淡入标题会在页面加载的那一刻定下基调。
• 特征行。 使用交错延迟按顺序上升的卡。
• 统计和计数器。 当数字滚动到视野中时,运动会吸引右眼。
• 感言。 轻松阅读的引文可以作为时刻而不是文本墙。
• 长着陆页。 每个宣布自己的部分都会保持滚动势头。

视频教程 #

观看动态动画,从启用扩展到完成页面。

常见问题 #

包裹起来 #

Entrance Animation 扩展为每个 Elementor 元素提供了一个滚动触发的入口:一个下拉效果,四个字段计时。将持续时间保持在第二秒以下,错开延迟,并在部分级别进行动画处理,页面感觉是刻意的而不是装饰的,对于响应光标而不是滚动的运动,请查看 浮动效果扩展的,以及 的完整列表 主插件小部件和扩展 有剩下的。