Lottie animation 網站動畫功能
之前講過Elementor Pro出了一個Multi-step form,現在跟大家說他們另一個新增的功能Lottie animation。
有個示範圖片,看到在網站上下拉動時,或者跟網站做一些互動時,會出現一些動畫。
以前常用flash來做,現在已經不用flash了,而且flash體積大,載入相對慢。
影片解說
動畫 animation
如果網站想做一些類似的animation,而也適用於手機,就可以用這個新功能,用lottie這個新元素。
用戶應該會喜歡的,因為增加了參與度。
做法是去lottiefiles網站,其實就是一些動畫類的東西。
首先要免費登記一個帳戶,然後在上面可以尋找主題,裡面有很多素材,都是免費的動畫,也支援手機。
比如我找單車,結果出來很多相關動畫,有些運動幅度還相當大。
Elementor pro – Lottie files
首先去選element – lottie,把它拉出來,左邊Source這裡要提供一個JSON file,點擊一下喜歡的單車動畫,就看到該動畫資料頁面上面有個Download JSON,下載後回到剛才要求JSON file的頁面,上載選好的動畫。
現在畫面看到剛才選的動畫了,去網站給大家看預覽,可以看到動畫播放了一次。
在設定那裡可以設為loop(不斷重播),但也還是少了互動元素。
Lottie files 設定
其實還有更多設定,可以設定什麼情況下動畫運轉,可以選擇幾種情況:viewport看到就播;點擊才播;
滑鼠滑到才播(電腦可以做,手機不行);
scroll 是我最喜歡的,就是拉動畫面的時候播出,往下拉動畫向前走,往上拉動畫往回走。
而且踩單車的速度也隨用戶拉動的快慢而變化,這個會比較有趣和有吸引力,因為多了互動。
Lottie 有多少 animation
我暫時還不清楚 Lottie 有多少 animation,就知道是免費的,但主流的會有,這個功能相當有趣,會讓你的網站與別不同。
因為用戶可以參與操控和改變畫面,容易令人印象深刻,有助延長逗留時間,絕對是好事一樁。
小結
Elementor Pro 本身已經有很多功能,再加上這個變得更吸引了,加上 Lottie 工具目前是免費使用,有興趣的話不妨可以嘗試一下