如何運用 Animista 免費 CSS 動畫庫,增強網站瀏覽體驗?

Animista 是一個網頁設計用的 CSS 動畫庫,這個平台收錄了數十種的淡入、淡出、旋轉、消失、強調之類的特效,且都沒用到任何的 JavaScript,是個很棒的免費資源。

我會找到 Animista 是因為現在的偵錯桐人基本上已經被我優化的差不多了,速度效能跟功能性也折騰到了一個平衡點,所以我希望能加一點簡單的特效,讓網站看起來能生動一些。現在我用了這個免費動畫庫中的「淡入」在網站內容主體中 (不包含頂部導覽列),這樣進入網站時就比較不會有過大的生硬感。

因為我現在有拿來正式部署用的特效只有「淡入」,所以這次就以在 WordPress 中實現網頁淡入效果來介紹。

操作流程

一、前往 Animista 網站,從 Entrances 找到 Fade In (淡入) 的效果,並點擊預覽區塊右上角的 {‧} 按鈕來檢視 CSS 程式碼。

image 74

二、看到程式碼後,建議將 Autoprefixer 勾選起來,可以解決在部份瀏覽器中動畫失效的問題,而 Minify (最小化) 要不要勾就看個人,如果你沒有要修改這個動畫的話可以勾起來,省下一點點的流量。

image 75

三、將上下兩區塊的程式碼都複製起來,把它貼上到 WordPress 控制台 > 外觀 > 自訂 > 附加的 CSS,並修改 Class 名稱讓它能套用到現在的網頁架構。

以偵錯桐人網站為例,我要將淡入效果套用在主要內容區,用 F12 開發人員工具檢查後是 <main> 標籤,所以直接將 .fade-in 改為 main 並儲存就完成了。

image 76

更新網站樣式後,確認沒問題後記得要清快取,不然要等很久才看會生效喔……

訂閱
Notify of
guest
0 留言
Inline Feedbacks
檢視所有留言