Chuyên mục

Blogger
  • Blogger Template 8
    • Seo Blogspot 29
      • Thiết kế Blogspot 26
        • Thủ thuật Blogspot 86
          • Tiện ích Blogspot 32
            Máy tính
            • Phần mềm 46
              • Sửa lỗi Windows 20
                • Thủ thuật Windows 78
                  • Cài đặt Windows 43

                    Tạo hiệu ứng chờ tải trang (preload) trong Blogger

                    Hiệu ứng chờ tải trang không có gì là mới mẻ cả và hiện nay rất nhiều trang web sử dụng. Mỗi trang đều sử dụng cho mục đích khác nhau mà một trong những nguyên do cần đưa hiệu ứng này vào là che đi phần khuyết điểm trong thời gian tải trang, bất kể thời gian tải bao lâu nếu thấy trang có hiện tượng bị giựt, bố cục hiển thị không đồng bộ ví dụ phần sau tải trước phần trước...

                    Tạo hiệu ứng chờ tải trang (preload) cho trang web

                    Hiểu theo cách đơn giản sẽ sử dụng hiệu ứng chờ tải trang làm che đi tất cả phần hiển thị trang web và chờ cho trang tải xong hiệu ứng sẽ tự động ẩn đi.

                    Đã gọi là hiệu ứng tất nhiên sẽ có 2 cách để tạo nhưng đều chung một nguyên lý: một là dùng file gif để làm hiệu ứng và hai là dùng animation css để làm hiệu ứng. Bài này mình sẽ sử dụng cách hai để trang không phải tải ảnh gif cho nhẹ, cách thực hiện như sau:

                    1. Code Css

                    Copy
                    #af-preloader{width:100%;height:100%;position:fixed;background-color:#fff;z-index:99999999;top:0;left:0}
                    .af-preloader-wrap{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
                    .af-sp{width:42px;height:42px;clear:both;margin:20px auto}
                    .af-sp-wave{border-radius:50%;position:relative;opacity:1}
                    .af-sp-wave:before,.af-sp-wave:after{content:'';border:2px #33b5e5 solid;border-radius:50%;width:100%;height:100%;position:absolute;left:0}
                    .af-sp-wave:before{transform:scale(1,1);opacity:1;-webkit-animation:spWaveBe .6s infinite linear;animation:spWaveBe .6s infinite linear}
                    .af-sp-wave:after{transform:scale(0,0);opacity:0;-webkit-animation:spWaveAf .6s infinite linear;animation:spWaveAf .6s infinite linear}
                    @-webkit-keyframes spWaveAf{from{-webkit-transform:scale(.5,.5);opacity:0}to{-webkit-transform:scale(1,1);opacity:1}}
                    @keyframes spWaveAf{from{transform:scale(.5,.5);opacity:0}to{transform:scale(1,1);opacity:1}}
                    @-webkit-keyframes spWaveBe{from{-webkit-transform:scale(1,1);opacity:1}to{-webkit-transform:scale(1.5,1.5);opacity:0}}
                    @keyframes spWaveBe{from{-webkit-transform:scale(1,1);opacity:1}to{-webkit-transform:scale(1.5,1.5);opacity:0}}

                    2. Code Html

                    Code này chèn ngay dưới thẻ <body>

                    Copy
                    <div id='af-preloader'>
                      <div class='af-preloader-wrap'>
                        <div class='af-sp af-sp-wave'></div>
                      </div>
                    </div>

                    3. Code Script

                    Phần này có thể sử dụng javascript hoặc jquery nếu trong theme đã có thư viện link jquery và chèn code trước thẻ đóng </body>

                    - Code javascript

                    Copy
                    <script>//<![CDATA[
                    window.addEventListener('load', function() {
                      // document.querySelector('#af-preloader').style.display = 'none'
                      document.getElementById('af-preloader').style.display = 'none'
                    })
                    //]]></script>

                    - Code jquery

                    Copy
                    <script>//<![CDATA[
                    $(window).on('load', function() {
                      $('#af-preloader').delay(500).fadeOut('slow')
                    })
                    //]]></script>

                    Xem demo: https://www.vietblogger.design
                    Xem demo 2: https://preload-page.blogspot.com/

                    Video hướng dẫn:

                    Nội dung chính
                      Bài đăng mới hơn Bài đăng cũ hơn