WordPress免費動畫圖庫LottieFiles動畫

Shape Image One
WordPress免費動畫圖庫LottieFiles動畫

WordPress免費動畫圖庫LottieFiles動畫

大叔今天來介紹免費的線上動畫工具Lottie files,有時候為網站增加一些小動畫,能達到畫龍點晴的效果,即使是平凡的頁面和文章也能馬上栩栩如生。

大叔目前的網站就有利用這些效果,網站加上這些效果可以讓網站瞬間活潑起來,如果你是用elementor pro版也就是付費版的話那就有可以導入動畫的功能。

如果是免費版的話那就要另外安裝Premium Addons for Elementor這款外掛,所以我們就先從安裝外掛開始吧!!

大叔有放上影片教學大家也可以去Youtube觀看教學影片!!

 

下面我們就一步一步的來操作吧!!

wordpress 安裝外掛

在wordpress後台點選外掛,然後安裝外掛。

Wordpress免費動畫圖庫LottieFiles動畫

接著在搜尋欄位輸入Premium Addons for Elementor,出現外掛後點選安裝,然後啟動。

啟動之後我們就可以先到LottieFiles去下載動畫。

Wordpress免費動畫圖庫LottieFiles動畫

Wordpress免費動畫圖庫LottieFiles動畫

LottieFiles網站下載動畫

來到LottieFiles網站我們先滑到Discover。

接著選擇free animations,然後跳到新的一頁。

Wordpress免費動畫圖庫

 

出現許多免費的動畫可選,選一個動畫,然後會跳出新頁面右上角有個download點開來會有下載的格式,我們選json。

然後會出現要你註冊的畫面,看那一種比較適合就選那一個,選好後跳回原來的畫面。

Wordpress免費動畫圖庫

動畫允許我們做一部份的修改,我們看到右下有一個Edit layer colors點選進去會有修改介面。

Wordpress免費動畫圖庫 Elementor+Lottie動畫

左邊工具列是可以修改的元素右邊工具列是修改的參數

 

大家可以調整自己喜歡的顏色如果有修改的話就點選updata修改好之後我們點選最下方下載的按鈕就可以下載到自己的電腦了

網站插入動畫

我們來到網站然後選擇要編輯的頁面,點選使用elementor編輯,比如大叔要在首頁加入動畫,所面就在首頁點選使用elementor編輯,在工具列的搜尋欄裡輸入Lottie,出現Lottie外掛後把外掛拖到要插入動畫的欄位

Wordpress免費動畫圖庫LottieFiles動畫 Wordpress免費動畫圖庫LottieFiles動畫

動畫工具列設定

動畫工具列有一些選項可以讓我們調整動畫的一些細節

我們來看一下設定的內容

第一項有兩個選項可以選

一個是媒體庫一個是連結網址我們剛才是下載到電腦裡所以就選媒體庫

接著第二項我們把下載好的動畫上傳然後動畫就插入到頁面了

Wordpress免費動畫圖庫LottieFiles動畫

動畫的部份也可以有細節可以調整點選工具列的設定會展開來設定項目

第一項起動條件

有五個選項

第一個是螢幕範圍內

只要動畫在螢幕範圍內就會起動

第二個是 點擊動畫起動

第三個是滑鼠滑過後起動

第四個是頁面滑到動畫後起動

第五個是不起動

大家可以自行決定要用哪一種大叔這裡是選第一個

下一個是布局螢幕範圍這一項保持預設就好不去更動

下一個循環撥放把它打開讓動畫重覆撥放

下一個是撥放速度可以調整動畫的速度保持在1倍就好大家也可以試著調整看看速度

下一個是撥放的起使跟終點這裡可以調整動畫要從那開始撥放從0到100是完整的撥放比如我輸入40開始一直放到100這樣動畫就會40這裡開始撥放

下一個Reverse倒放是指要讓動畫從頭放到尾之後在從尾放到頭這也是大家可以決定要不要這樣放有些動畫這樣撥放反而有不一樣的效果

下一個渲染有svg跟conves兩種簡單說canvas適合網站有許多物件要被頻繁重畫的圖形SVG最適合大型渲染區塊的應用程式一般用SVG就可以了

Lazy Load這個功能是使用者透過滑鼠或觸控捲動瀏覽頁面直到頁面下方時才會依照Javascript等程式碼發出連線請求自動下載載入更多內容於同一網頁目的是減少網路頻寬與裝置負擔

Wordpress免費動畫圖庫LottieFiles動畫

 

接下來我們點選工具列上方的樣式這裡可以調整動畫的大小

全部設定完成後我們儲存然後就可以看一下效果了

Wordpress免費動畫圖庫LottieFiles動畫

大家可以動手操作看看為自己的網站增加活力

結論

以上就是整個 WordPress免費動畫圖庫LottieFiles動畫 的操作流程

大家可以到大叔的youtubeFacebook上訂閱關注大叔,以獲取定期更新的最新內容。 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *