Elementor为图片背景添加视差滚动效果

在网页特效中,视差滚动是非常常见的一种效果,可以让网页看起来很有设计感,在本文中我们介绍如何用Elementor实现视差滚动特效(Pro版)

首先我们添加一个段,并为其添加图片背景

1589198240-b17cddd7f2ca334

然后我们开始设置背景图片,在图像设置的下方,有一个叫做Scrolling Effects的选项,这里就是滚动视差效果的设置

滚动视差

将开关打开,这里面主要有2个选项,Vertical Scroll 纵向滚动特效,Horizontal Scroll 横向滚动特效

1589198244-15df291445c4513

可以通过滑杆调节速度和图像的展示部分

1589198246-4c4619a48797710

除了视差滚动外,在这里你还可以设置缩放、模糊等效果

鼠标追踪

上面的都是滚动相关的视差效果,还有一种常见的就是鼠标追踪的视差效果,这个也能在Elementor中实现

点击下方的Mouse Effects,就能开启鼠标视差效果了,可以设置速度与方向

1589198247-2c621993569ad95

应用到其他元素

除了可以直接对背景使用视差效果外,还可以直接应用到元素上,带来更大的灵活性

1589198248-e4c6398d31a5fdf
免责申明:
1. 本站所有教程、文章或资源分享目的仅供大家学习和交流,可进群讨论!
2. 如有无法查看或链接失效,烦请报告联系管理员处理!
3. 本站无法保证资源或其时效性,恕不接受任何提问。
4. 欢迎大家帮助本站出力,赞助费用仅维持本站的日常运营所需!故不接受任何形式的退款。
5. 搜5G网无法保证文章教程或资源的完善与安全,请自行检测解决。
6. 在本站下载的源码严禁杜绝任何形式的正式商业用途,请去程序官方购买。
本站资源素材仅提供学习的平台,所有资料均来自于网络,版权归原创者所有!本站不提供任何保证,并不承担任何法律责任,如果对您的版权或者利益造成损害,请提供相应的资质证明,我们将于3个工作日内予以删除。本作品采用BY-NC-SA 4.0 《国际知识共享署名许可协议4.0》 进行许可 。
本站所有图片素材均享自由版权下创作共用CC0协议。
搜5G资源网,5G资源网 » Elementor为图片背景添加视差滚动效果

发表评论

搜5G网永久会员限时优惠中,不限下载,免费更新

立即查看 了解详情