Black Friday 優惠​即將到期​

小時
分鐘

有冇朋友的 blog / media site 廣告收入唔多,並且想賣,可以 email 我,我想買嚟試 SEO 嘢。

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(不斷重播),但也還是少了互動元素。

延伸閱讀: Elementor 已經有 400 萬下載,半年前還是 300 萬下載

Lottie files 設定

其實還有更多設定,可以設定什麼情況下動畫運轉,可以選擇幾種情況:viewport看到就播;點擊才播;

滑鼠滑到才播(電腦可以做,手機不行);

scroll 是我最喜歡的,就是拉動畫面的時候播出,往下拉動畫向前走,往上拉動畫往回走。

而且踩單車的速度也隨用戶拉動的快慢而變化,這個會比較有趣和有吸引力,因為多了互動。

Lottie 有多少 animation

我暫時還不清楚 Lottie 有多少 animation,就知道是免費的,但主流的會有,這個功能相當有趣,會讓你的網站與別不同。

因為用戶可以參與操控和改變畫面,容易令人印象深刻,有助延長逗留時間,絕對是好事一樁。

小結

Elementor Pro 本身已經有很多功能,再加上這個變得更吸引了,加上 Lottie 工具目前是免費使用,有興趣的話不妨可以嘗試一下

Ivan So 擁有 18 年的經驗關於 SEO,WordPress 網站,電子商務方面,Ivan 建造了 50 個網站來測試 SEO 性能,一些網站的表現非常好,最後賣給了不同的公司。

並且處理了 400 多個 WordPress 及電子商務網站的設計和開發,香港、新加坡及馬來西亞 WordCamp 的演講者,香港 WordCamp 主要組織者,香港 WordPress 聚會聯合組織者及香港 Elementor 聚會聯合組織者。

5 本暢銷 Amazon電子書關於數碼營銷及香港 Mailchimp 唯一合作夥伴及官方認證。

還獲得了多個有關 IT 的獎項,擔任創業和商業比賽的評審,還有多個研討會,大學的演講嘉賓及超過 12,000 個 Udemy 學生。
ivan so

Leave a Comment