Motion 你的 Elementor!如何製作有旋轉特效的 Go To Top

Elementor Pro 自 2.5 版本後,新增了 Motion Effects 功能,以下文章將 Step by Step 教大家如何製作具有旋轉特效的 Go To Top,提升網頁互動性與視覺效果。

不懂得程式語法也可以製作網頁互動特效!

Elementor Pro v2.5 之後的版本,透過操作 面板進階,即可設定物件 Motion Effects,其互動效果是藉由滑鼠移動或滾動所產生的視差。

滾動視差 (Parallax scrolling) 是什麼呢?
其實就是當使用者利用滑鼠滾動或拖拉網頁捲軸時,將不同物件以不同的速度移動,造成視覺上的錯覺,形成立體的運動效果,產生不同的視覺體驗與趣味性。

Elementor Pro v2.5 新增了以下功能:  

  • Vertical Scroll (即傳統的滾動視差)
  • Horizontal Scroll
  • Transparency
  • Blur
  • Rotate
  • Scale
  • Mouse Track
  • 3D Tilt

有興趣的朋友可以至 Elementor 官網部落格,觀看所有特效如何運作,網址連結如下:https://elementor.com/blog/introducing-motion-effects/

以下教學將運用 Custom Positioning 搭配 Motion Effects:Rotate 製作有旋轉特效的 Go To Top。

一、前置步驟

  1.  將 Elementor Pro 更新至 v2.5 版本以上(請自行斟酌更新)
  2.  準備圖片素材(須為透明背景),共兩張:
    一張是旋轉文字;另一張是放置中間的固定圖片,兩張圖片請輸出相同的尺寸,想要練習的話也可以直接下載我的範例圖片。

二、設定步驟

1. 新增「段」,為物件創造放置的空間

2. 在「佈局」進行滿版設定

編輯 段

拉伸段:開啟
內容寬度:全寬
欄間距:沒有間距

3. 插入「圖片」,請先插入「旋轉文字圖檔」

4. 至「進階:Custom Positioning」

編輯 圖片

寬度:自訂,請將單位調整為「vw」,並將圖片尺寸調整至適切大小
位置:Fix
Horizontal Orientation 至左;Offset 單位調整為「px」
Vertical Orientation 至下;Offset 單位調整為「px」
* 位置請依照自己的需求調整

5. 至「進階:Motion Effects」

編輯 圖片

Scrolling Effects:開啟
Rotate:方向請自行定義 / Speed:2 / Viewport:0% ~ 100%

Try it ! 測試看看吧!

若你是從空白頁面開始編輯,可以再插入一個「段」,將最小高度設為 300 VH,即可查看目前滾動的效果。

6. 複製圖片,將圖片置換成「固定圖片圖檔」,至「進階:Motion Effects」

編輯 圖片

Scrolling Effects:關閉

再來賦予它「Go To Top」的功能吧!

1. 編輯「段」→ 進階
* 建議設定在頁面第一的「段」

編輯 段

CSS ID:top

2. 編輯「圖片」→ 內容

編輯 圖片

連結:客製URL,輸入「#top」

針對不同裝置的設定(平板、手機)

1. 切換「響應模式」
* 互動效果部分裝置無法正常運作

2. 至「進階:Custom Positioning」

編輯 圖片

寬度:自訂,請將單位調整為「vw」,並將兩個圖片尺寸調整至適切大小且相同的數值

大功告成!

藉由以上操作步驟,大家是否成功製作出具有互動效果的 Go To Top 了嗎?
在此也期待著 Elementor 往後的更新功能,Elementor 它所見即所得的操作方式造福了許多不懂得程式語法又想自己製作網頁的朋友!只需要透過簡單的設定即可達成有趣的互動特效,歡迎分享你們的成果喔!
我們下次見 ~