之前講過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本身已經有很多功能,再加上這個變得更吸引了。
Ivan So 擁有 15 年的經驗關於 SEO,WordPress 網站,電子商務方面,Ivan 建造了 50 個網站來測試 SEO 性能,一些網站的表現非常好,最後賣給了不同的公司。
並且處理了 350 多個 WordPress 及電子商務網站的設計和開發,香港、新加坡及馬來西亞 WordCamp 的演講者,香港 WordCamp 主要組織者,香港 WordPress 聚會聯合組織者及香港 Elementor 聚會聯合組織者。
5 本暢銷 Amazon電子書關於數碼營銷及香港 Mailchimp 唯一合作夥伴及官方認證。
還獲得了多個有關 IT 的獎項,擔任創業和商業比賽的評審,還有多個研討會,大學的演講嘉賓及超過 11,000 個 Udemy 學生。