Generic filters
Exact matches only
Search in title
Search in content
Search in excerpt

页面

教程分类

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

Generic filters
Exact matches only
Search in title
Search in content
Search in excerpt
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教程

: ) 文章内容均为原创,转载须注明出处并添加原文链接,否则视为侵权
Well企业微信
专业网站搭建,扫码直接咨询
外贸服务器推荐(Well在用的服务器)
vultr-logo
一线品牌VPS服务器,稳定、不贵、性能强
Clouvider-logo
二线品牌VPS服务器,稳定、便宜、性能强
文章标签
文章推荐
文章目录
相关文章
没有账号? 忘记密码?