[網路資源]簡潔俐落的CSS載入動畫

/ 分類: , / 0 則回應

標籤: ,

由瑞典的Tobias Ahlin所製作的CSS載入動畫,陸續更新當中
有最基本的圓圈淡入動畫,到最新的翻頁動畫都非常精彩~~
並於網頁上方有source 原始檔可提供使用

loading_title_s3 loading_title_s2
loading_title_s1

CSS載入動畫範例觀看

那何時我們會用到載入動畫(Loading Spinner)其實就是用在網頁未完全顯示前給瀏覽者看的動畫效果。來讓瀏覽者了解頁面還在載入中~~

原理就是
我們在內容目標網頁還沒載入前先插入動畫
等待完成網頁內容後
淡出載入動畫

要如何添加在wordpress中載入動畫呢?
1.首先先把網頁中的css語法複製到你的wordpress的樣式表 (style.css)
2.在「頁首 (header.php)」文件的 <body> 後同樣添加下列代碼
<div id=“動畫名”></div>

3.在「頁尾 (footer.php)」內的 </body> 前添加下列代碼就完成(代表載入動畫會漸漸淡出)

<script>
jQuery(window).load(function() {
jQuery(“#動畫名”).fadeOut(500);
});

</script>

 

發表留言