精選文章

旅遊、網購通路推廣|各類通路推廣區

這裡存放有興趣的通路連結,日後可以使用 旅遊通路 Trip.com (機票) Agoda (房間) 網購通路 momo購物網 momo綠色生活館 東森購物網 LINE購物 Yahoo購物中心 博客來 Nike官方網站 縮短網址服務 boo.tw免費縮網址 #momo購物連結20分鐘內購買才算有效訂單喔 #可以先把想買的東西加到購物車,再點連結進去結帳 理膚寶水 La Roche-Posay 敏感肌膚美好生活皮膚科醫生指定推薦 No.1品牌 我超愛的產品,一起加入會員! (包裝很吸引人) 介紹請看-> 理膚寶水產品分享 推薦帳號填寫0930884848可以獲得10點會員點數 點擊註冊理膚寶水會員 各類網站推廣區 #通路推廣#網購#旅遊住宿#線上購物# 上方所有連結點進去的網站是官方提供的安全網站哦,這裡只是使用通路王做跳轉的動作,請放心使用,也歡迎點選下方連結一起加入通路王的推廣行列。

網頁Loading載入效果

新增網頁在loading時的動畫效果

網頁Loading載入效果

前端如果有大量元素要載入的時候,為了呈現畫面的美觀,通常都會有一個loading的畫面

先前加入這個效果本來是要解決js載入網站有延遲,導致跑版的問題,不過修改一個class之後就解決了
可是既然已經找到相關的製作方式,何不套用在網站中呢~

另外設定Timeout的原因就是在頻繁切換網頁的時候,如果網頁載入沒有延遲,loading畫面會一閃而過,不太美觀。

此次參考的網頁

程式碼部分

Head加入以下style

<style>
        /* Center the loader */
        #loader {
          position: absolute;
          left: 50%;
          top: 50%;
          z-index: 1;
          width: 150px;
          height: 150px;
          margin: -75px 0 0 -75px;
          border: 16px solid #f3f3f3;
          border-radius: 50%;
          border-top: 16px solid #3498db;
          width: 160px;
          height: 160px;
          -webkit-animation: spin 2s linear infinite;
          animation: spin 2s linear infinite;
        }

        @-webkit-keyframes spin {
          0% { -webkit-transform: rotate(0deg); }
          100% { -webkit-transform: rotate(360deg); }
        }

        @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }

        /* Add animation to "page content" */
        .animate-bottom {
          position: relative;
          -webkit-animation-name: animatebottom;
          -webkit-animation-duration: 1s;
          animation-name: animatebottom;
          animation-duration: 1.5s
        }

        @-webkit-keyframes animatebottom {
          from { bottom:-100px; opacity:0 } 
          to { bottom:0px; opacity:1 }
        }

        @keyframes animatebottom { 
          from{ bottom:-100px; opacity:0 } 
          to{ bottom:0; opacity:1 }
        }

        #myDiv {
          display: none;
        }
</style>


在body加入以下項目

<body style="margin:0;"><body>


加入loading的div區塊

<div id="loader"></div>


用div包住內容

<div style="display:none;" id="myDiv" class="animate-bottom"><div>

body的最後使用此段程式碼

<script>
    setTimeout(function () {
        $(document).ready(function () {
            document.getElementById("loader").style.display = "none";
            document.getElementById("myDiv").style.display = "block";
        });
     }, 500);
</script>

 


#loading效果#網頁loading

 

留言

這個網誌中的熱門文章

美股投資平台|eToro簡單介紹

空氣清淨除濕機開箱文|Panasonic國際牌8公升一級能效除濕機F-Y16EN