Hiệu ứng tải trang cực đẹp

Mình nói thêm một tí về hiệu ứng tải trang, có 2 cách để tạo hiệu ứng này: Một hiệu ứng này hoàn toàn được tạo bởi từ một đoạn CSS (tùy biến hơi khó) và Hai hiệu ứng này thể hiệnmột đoạn text hay một hình ảnh(tùy biến một các dễ dàng). Ở bài viết này mình hướng dẫn các các tạo hiệu ứng tải trang bằng cách sử dụng một ảnh động.

Khi các bạn bấm chuyển trang thì hiệu ứng sẽ xuất hiện như hình minh họa ở phía bên dưới và đây là DEMO cho các bạn xem trước.

☼ Giờ bắt đầu thủ thuật cùng Windows2it.

Vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phímCtrl + F và tìm đến thẻ </body>. Sau đó dán đoạn mã Code sau lên phía trên thẻ </body> vàLưu mẫu.

<style>
#page-loader {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO1JlCyaCTNqUA7Sg7wAn10F0twtBI-HmaV4v3Oz1XLxPW8BJm8fxoCbdtZDBIm7rrKTmyeSWjQoLdTw-UZ-oGL82Z9u3pYvgsfdVbqee_wzo0La3l4DNjs2BBYTsdlVasJf87axkneIV0/s1600/loading.gif') no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
    // ... Show the Animation `.fadeIn()`
    $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>  

☼ Tùy chỉnh

·        background:#000: Màu nền khi tải trang.

·        Các thông số.fadeIn(1000) (thời gian hiệu ứng đậm dần và xuất hiện) _ .delay(6000) (thời gian hiệu ứng duy trì) _.fadeOut(1000) (thời gian hiệu ứng mở dần và biến mất) (đó là các thông số chuẩn nhưng cần thiết Bạn có thể thay đổi nó để phù hợp với Blog/Website của Bạn).

·        Thay đổi link ảnh màu xanh thành link ảnh bạn mong muốn.

Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều.

Share this post

La Ngọc Hưng

Chào các bạn đến với blog truyện tổng hợp của mình nhé !

Facebook

WhatsApp

Instagram

Subscribe Our Newsletter

Posting Terkait