網頁載入時的動畫效果

當部落格或網站載入資料時, 為了暫時遮蔽不完全的區域或物件元素, 又或者表示正在載入動作提示給訪客, 我們可以採用小巧的動畫效果當作這個過度階段的主體. 在此分享使用CSS構成的動畫效果可以壓縮資訊流至最小, 當作2014年的新年禮物.  當然我不會只使用基本結構來當作禮物, 會添加全頁面透明感背景和淡出效果, 適合原有使用jQuery函式庫的網友. 網頁元素載入後動畫自動消失的效果如下：


安裝的方法：

CSS部份. 紅字部份請依據個人範本做調整.

.dt-loading{background:rgba(0,0,0,0.9);width:100%;height:100%;z-index:101;text-align:center;position:fixed;top:0;bottom:0;left:0;right:0;padding:20% 0}
.laying{background-color:rgba(0,0,0,0);border:5px solid rgba(97,225,255,0.9);opacity:.9;border-right:5px solid rgba(0,0,0,0);border-left:5px solid rgba(0,0,0,0);border-radius:50px;box-shadow:0 0 35px #187BD8;width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite ease-in-out;-o-animation:spinPulse 1s infinite ease-in-out;animation:spinPulse 1s infinite ease-in-out}
.layout{background-color:rgba(0,0,0,0);border:5px solid rgba(97,145,255,0.9);opacity:.9;border-left:5px solid rgba(0,0,0,0);border-right:5px solid rgba(0,0,0,0);border-radius:50px;box-shadow:0 0 15px #187BD8;width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;-o-animation:spinoffPulse 1s infinite linear;animation:spinoffPulse 1s infinite linear}
@-moz-keyframes spinPulse{0{-moz-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #187BD8}
50%{-moz-transform:rotate(145deg);opacity:1}
100%{-moz-transform:rotate(-320deg);opacity:0}
}
@-moz-keyframes spinoffPulse{0{-moz-transform:rotate(0)}
100%{-moz-transform:rotate(360deg)}
}
@-webkit-keyframes spinPulse{0{-webkit-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #187BD8}
50%{-webkit-transform:rotate(145deg);opacity:1}
100%{-webkit-transform:rotate(-320deg);opacity:0}
}
@-webkit-keyframes spinoffPulse{0{-webkit-transform:rotate(0)}
100%{-webkit-transform:rotate(360deg)}
}
@-o-keyframes spinPulse{0{-o-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #187BD8}
50%{-o-transform:rotate(145deg);opacity:1}
100%{-o-transform:rotate(-320deg);opacity:0}
}
@-o-keyframes spinoffPulse{0{-o-transform:rotate(0)}
100%{-o-transform:rotate(360deg)}
}
@keyframes spinPulse{0{transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #187BD8}
50%{transform:rotate(145deg);opacity:1}
100%{transform:rotate(-320deg);opacity:0}
}
@keyframes spinoffPulse{0{transform:rotate(0)}
100%{transform:rotate(360deg)}
}

javacript部份.

<script>
jQuery(document).ready(function() {
$(".dt-loading").fadeOut('slow');
});
</script>

顯示部份, 安裝至 </body> 之前.

<div class='dt-loading'>
 <div class='laying'></div>
 <div class='layout'></div>
</div>

你可能感覺這個效果一閃而逝, 那麼應該恭喜您的網頁載入很快速. 但有時是網頁元素已經載入, 某些物件事實上卻尚未真正完成, 例如影片、社群按鈕、Flash、廣告等等被內嵌的程式碼還在繼續載入中. 我們可以稍微調整緩衝時間, 在第二部份的javascript改成：

<script>
setTimeout(function() {
 $(".dt-loading").fadeOut('slow');
},6000);
</script>

這裡的延遲時間單位為毫秒, 6000相當於6秒的意思. 範例二如下：


好吧! 我看到懶人眼裡期盼的閃閃淚光... 將以下的懶人包直接複製到 </body> 之前. 已裝設jQuery程式庫者請省略第一行. 此處的設定為延展5秒, 應該很夠用了!

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
<script src='//googledrive.com/host/0B670PZGlLRSXa2M5RWNKWW1aYkE/loading.js'/>

懶人包 2 - 漸層遮罩

<script src='//googledrive.com/host/0B670PZGlLRSXa2M5RWNKWW1aYkE/loading2.js'/>

進階篇

既然我們可以延遲頁面的時間, 又有個 <div class='dt-loading'> 區塊當支撐, 可以將載入的動畫更換成自己設計的動畫當作歡迎頁面. 無論是圖片、影片、內嵌網頁、Flash等等都能運用到這個特殊時段裡面, 當然檔案是越小越好以免讓人反感. 於第三段 - 顯示部份修改如下：

<div class='dt-loading'>
 內嵌物件 (使用HTML)
</div>

喜歡嗎? 節日前設計個個人風格的歡迎卡吧! var types=[BootstrapDialog.TYPE_SUCCESS];$.each(types,function(index,type){BootstrapDialog.show({type:type,title:' Suggestion',message:'或許你會考慮 HTML5 方案
使用 Adobe Edge Animate CC 設計獨特的HTML5動畫效果, 也是很好的選擇',buttons:[{id:'btn-ok',label:' OK',cssClass:'btn-primary',autospin:false,action:function(dialogRef){dialogRef.close()}}]});});

參考資料：Alessio Atzeni

---

Author Summary

Subject : 網頁載入時的動畫效果
Author : Unknown - Dream Talker Updated at: 3:08 AM
Votes : 100% - 5.0 - based on 2015
網站或網頁載入時的全頁面動畫效果-jQuery loading effect

Unknown

5 Stars - Reviews