Webflow 筆記 -複製 Page Interaction 到其它網站的技巧
這次要解決的問題是發生在我想將一個富含 Webflow Page Interaction 的頁面複製成一個獨立網站時所遭遇的問題。
在 WF 中，使用者可為網頁元素( Element )設置互動 ( Interaction ) 與繼而觸發的動畫。當使用者複製 Element 到其它 WF 網站時，設定於該 Element 的 Interaction 會一併被複製過去，然而對整個頁面 ( Page ) 設定的互動卻沒有辦法。
這些對整個頁面的互動包含 :
1. 一次性觸發事件 ( Page Load, Page Scroll )
2. 持續性事件 ( Mouse Move in viewport, While Page is scrolling )
WF 的討論區中有針對此題的解決思路 :
而我則是寫下本篇來記錄詳細過程 :
1 ) 將 Page Trigger interaction 套用到一個臨時的 Element 上。
※ 因為事件性質的不同， Page Load / Page Scroll 的 Interaction 只能綁到 Mouse Click 這類一次性事件上；同理，Page Scroll → While element scroll into view、Mouse move in viewport → Mouse move over element。
2 ) 將該 Trigger Element 與動畫相關的 Element 一併複製到目標網站中，一定要一起複製，否則動畫會失去作動對象。
3 ) 將臨時 Element 中的 Interaction 重新設定回 Page Trigger
4 ) 特例 — 對第三方外掛 Spline 而言，如果動畫的對象是 Spline 中的物件，則一律需要重新指定該物件。
以上是本次的分享，感謝觀看～
