Select Page

WordPress Animate css – 如何製作文字與圖片動態效果

WordPress Animate css – 如何製作文字與圖片動態效果

WordPress Animate css

WordPress 裡使用 CSS 式樣來做動態效果,一直是 max 很喜歡的一種讓版面活潑一點的方式。今天就要來跟大家分享,如何的在文章裡面讓文字或是圖片有動態展示的效果,不需要外掛程式,只需要在編輯文章時直接套用式樣檔的動態類型,這個動態的效果就會自然呈現。可以很輕鬆的幫助版面作變化,吸引閱讀者閱讀版面內容的興趣,有興趣的朋友可以參考一下。
 

下載 Animate.css

  • 請前往 Animate.css 網站下載 Animate.css 式樣檔,並且上傳到子佈景主題資料夾下。
  • 同時在式樣作者網站就可以看到式樣各種的動態效果,點選左側的效果名稱,就可以看見上方字體即時的動態效果展示,有超過70種的效果可以選擇。
  • 有興趣想要對 Animate.css 做更進一步的瞭解,可以前往作者專案頁面 https://github.com/daneden/animate.css也以很詳細的操作說明。

 

Animate.css
Animate.css

 

WordPress 佈景主題載入 Animate.css

將下載回來的 Animate.css 式樣檔置入佈景主題中有很多方式,以下逐一做說明。

  • 第一個方法是開啟子佈景主題的 header.php檔案,在 </head>之前填入以下語法:

  • 或是直接採取 CDNJS上的式樣檔:

  • 或是第二個方法,開啟子佈景主題的式樣檔(style.css),置入以下語法:

    直接使用 CDNJS上的檔案。

    或是使用下載回來的 animate.css檔。

  •  

  • 或是第三個方法,開啟子佈景主題的 functions.php 檔案,置入以下語法:

  • 以上三種在佈景主題載入式樣檔的方式,只需要選擇一種使用即可,可以參考一下自己的主機測試效能,找到最適合的方法來使用。

 

文字或是圖片使用動態式樣

  • 接下來開始對需要的文字或是圖片作動態式樣設計。
  • 在文章編輯時如果要使用這個動態式樣的效果,請將編輯模式切換到文字,接著對想要呈現效果的文字下式樣的設定,以下範例是製作動態文字這四個字的 bounce效果,動態效果總共有70餘種效果可以挑選使用。

  • animated:定義式樣,infinite:一直重複動作,bounce:效果,其他效果 CLASS設計可以參閱作者網站

 

 

結論

如何的好好利用網路資源,打造一個優質網站,是每一個網站管理者或是設計者持續努力不間斷的課題。很高興的在 WordPress 裡可以很輕鬆的將這些資源整合在一起,即使是不會程式設計的朋友,也可以很容易的操作出一些很專頁的效果,期許大家可以發揮創意善用資源,持續打造出一個又一個優質又符合使用者經驗的網站。

About The Author

max

使用 WordPress 架設網站不再是一件痛苦的工作。這裡跟大家分享使用WordPress的相關問題與研究。 並且提供有關WordPress外掛程式,佈景主題等等的使用經驗分享。 幫助想要建立網站的朋友,可以簡單,快速,無痛苦的建立與使用網站。

網站架設

WordPress 虛擬主機免費安裝設定