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. 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.
Bài này mình sẽ sử dụng code CSS + HTML để trang không phải tải ảnh gif cho nhẹ, cách thực hiện như sau:
Hiệu ứng chờ tải trang (preload) cho blogspot
Code CSS
Code này các bạn đặt trên thẻ ]]></b:skin> hoặc trong thẻ chứa CSS của blog bạn.
#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}}
Code HTML
Code này chèn dưới thẻ <body>
<div id='af-preloader'>
<div class='af-preloader-wrap'>
<div class='af-sp af-sp-wave'></div>
</div>
</div>
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>
<script>//<![CDATA[
window.addEventListener('load', function() {
// document.querySelector('#af-preloader').style.display = 'none'
document.getElementById('af-preloader').style.display = 'none'
})
//]]></script>
<script>//<![CDATA[
$(window).on('load', function() {
$('#af-preloader').delay(500).fadeOut('slow')
})
//]]></script>
OK chỉ vài bước coppy code đơn giản vậy thôi là các bạn có thể tự tạo một hiệu ứng chờ tải trang (preload) cho blogspot của mình rồi. Chúc các bạn thành công!
Hay đó a Niệm :D
Trả lờiXóaxin một back link : https://www.hungcoder.com/ :D :D
Thanks a đang cần !
Trả lờiXóaĐúng lúc mình đang cần. Cảm ơn bạn nha
Trả lờiXóaLại theme mới :3
Trả lờiXóaCó vẻ ngon 😁
Xóalên con gà cho rực rỡ a ơi :)
Trả lờiXóavẫn chưa có gà bác ơi
Trả lờiXóa