Elementor Scroll Snap功能用法,实现页面滚动捕捉效果

Elementor Scroll Snap功能
使用Elementor Scroll Snap功能实现页面滚动捕捉效果,通过一步简单的设置就能提升页面高级感。
文章目录

本篇文章共 662 字,预计阅读时间 3 分钟

Elementor Scroll Snap功能介绍

Scroll Snap(滚动捕捉)效果可以让页面滚动时,捕捉并快速跳转到当下滚动的板块位置。

使得页面在滚动时就像放映PPT一样,呈现一种高级页面效果。

Elementor中只需要在页面中开启Scroll Snap功能就能实现这一效果。

实现页面滚动捕捉效果

首先通过Elementor打开需要设置滚动捕捉效果的页面。

Elementor页面设置

  1. 点击页面上方的设置图标
  2. 点击页面设置里的高级设置
  3. 打开Scroll Snap板块
  4. 开启Scroll Snap功能

设置Scroll Snap:

Elementor Scroll Snap设置

  • Snap Position:Top
  • Scroll Padding:50px
  • Scroll Snap Stop:Always

然后保存页面,我们来预览一下效果:

为了能更明显看出效果,Well对每个板块设置了不同的背景色。

可以看到,当即将要滚动到下一板块的时候,页面自动就跳转到下一板块顶部。

我们再来进行另一种设置:

Elementor Scroll Snap设置居中显示

在原有设置基础项修改:

  • Snap Position:Center
  • Scroll Padding:0 px

再来看一下效果:

Well更喜欢这个效果,显得滚动更加顺滑一些。

至此,本篇滚动捕捉效果教程结束。

推荐你看更多Elementor教程

: ) 文章内容均为原创,转载须注明出处并添加原文链接,否则视为侵权
B2B外贸建站服务 - well建站
Well提供外贸建站服务,高性价比、不玩套路、终身售后。
文章标签
文章推荐
文章目录
相关文章