網頁載入時的動畫效果

7   Comments

當部落格或網站載入資料時, 為了暫時遮蔽不完全的區域或物件元素, 又或者表示正在載入動作提示給訪客, 我們可以採用小巧的動畫效果當作這個過度階段的主體. 在此分享使用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 : - Dream Talker Updated at: 3:08 AM
Votes : 100% - 5.0 - based on 2015
網站或網頁載入時的全頁面動畫效果-jQuery loading effect
5 Stars - Reviews
留言提示 - Comment Tips
◆ 如果您有任何想法或意見,歡迎參與留言。
◆ Disqus匿名留言,信箱及個人資訊不會公開顯示。
◆ 請多使用社群帳號留言,可簡化流程並訂閱回復。
◆ 『私密留言』請使用Google+分享按鍵,留言須使用『@Mark X』在訊息中,以免遺漏通知。
◆ G+ 訊息中指名分享對象的參考文件: 『 說明
  • Disqus
  • Blogger
  • Facebook
Anonymous left your nick please
  1. Anonymous2:31 AM

    這一篇拖了兩年有吧?
    以為你會做個聖誕歡樂卡當作懶人包哩!

    ReplyDelete
    Replies
    1. 好像快兩年前妳有問過, ㄟ?! 兩年了啊? 白駒過隙一瞬間.
      很欠缺時間, 就沒空做了. 這篇兩週前差不多寫好了, 也是因為沒有空做首圖就一直放著.

      Delete
  2. Anonymous2:11 AM

    MARK你好
    我用DEMO1會自動消失,但使用DEMO2懶人包不會消失,是為什麼呢?
    JASON

    ReplyDelete
    Replies
    1. Anonymous2:16 AM

      PS:我是說DEMO C那種

      Delete
    2. Jason, 您的範本有使用Demo B的jquery.min.js嗎?
      懶人包2也需要這個插件.

      Delete
  3. 我也想看如何運用logo的方式, 你們好詐喔!在留言欄私下交易 XD

    ReplyDelete
    Replies
    1. 哪來的私下交易啊?! 如果是複雜點的問題我就懶得寫了, 簡單的還能趁空寫.
      新範例:jQuery progress icon

      Delete