Elementor Scroll Snap功能用法,實現頁面滾動捕捉效果

Elementor Scroll Snap功能
使用Elementor Scroll Snap功能實現頁面滾動捕捉效果,透過一步簡單的設定就能提升頁面進階感。
文章目錄

本篇文章共662 字,預計閱讀時間3 分鐘

Elementor Scroll Snap功能介紹

Scroll Snap(滾動捕捉)效果可以讓頁面滾動時,捕捉並快速跳到當下滾動的板塊位置。

使得頁面在滾動時就像放映PPT一樣,呈現一種進階頁面效果。

元素中只需要在頁面中開啟Scroll Snap功能就能達到效果。

實現頁面滾動捕捉效果

首先透過Elementor開啟需要設定滾動捕捉效果的頁面。

Elementor頁面設定

  1. 點擊頁面上方的設定圖標
  2. 點擊頁面設定裡的高級設置
  3. 開啟Scroll Snap板塊
  4. 開啟Scroll Snap功能

設定Scroll Snap:

Elementor Scroll Snap設置

  • 快照位置:頂部
  • 滾動內邊距:50px
  • 滾動捕捉停止:始終

然後儲存頁面,我們來預覽一下效果:

為了更明顯看出效果,Well對每個板塊設定了不同的背景色。

可以看到,當即將要滾動到下一板塊的時候,頁面自動就跳到下一板塊頂部。

我們再來進行另一種設定:

Elementor Scroll Snap設定居中顯示

在原有設定基礎項修改:

  • 捕捉位置:中心
  • 滾動內邊距:0 px

再來看一下效果:

Well更喜歡這個效果,顯得滾動更加順滑一些。

至此,本篇滾動捕捉效果教學結束。

推薦你看更多Elementor教學課程

: ) 文章內容均為原創,轉載須註明出處並添加原文鏈接,否則視為侵權
外貿伺服器推薦(Well在用的伺服器)
vultr-徽標
一線品牌VPS伺服器,穩定、不貴、效能強
二線品牌VPS伺服器,穩定、便宜、效能強
文章標籤
文章推薦
文章目錄
相關文章
zh_TWZH_TW