Tạo hiệu ứng loading khi chuyển trang cực kì đẹp và chuyên nghiệp

#Thủ Thuật #Windows #Blogger #Facebook

Tạo hiệu ứng loading khi chuyển trang cực kì đẹp và chuyên nghiệp

Share:
Để góp phần làm blog của bạn thêm chuyên nghiệp và sinh động, hôm nay mình sẽ giới thiệu đến các bạn một hiệu ứng loading cực kì đẹp và chuyên nghiệp khi chuyển trang. Thủ thuật này được chia sẻ khá nhiều rồi nhưng mình đã tùy biến lại một chút để cho hiệu ứng đẹp và nhẹ hơn.
Bạn muốn xem demo thì hãy bấm nút Ctrl rồi bấm vào bất kì link nào trên blog để xem hiệu ứng.
Cùng thực hiện thủ thuật nhé.
Bước 1: Đăng nhập Blogger Mẫu Chỉnh sửa HTML.
Bước 2: Chép và dán đoạn CSS sau vào trên thẻ ]]></b:skin> trong template.
#loadhalaman{cursor:wait;position:fixed;opacity:1;top:0;left:0;background-color:rgba(0,0,0,.99);z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none}.loadball{background-color:transparent;border:3px solid #55579e;border-right:3px solid transparent;border-left:3px solid transparent;border-radius:50px;box-shadow:0 0 55px #55579e;width:60px;height:60px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1.5s infinite linear;display:none}.loadball-2{background-color:transparent;border:4px solid #55579e;border-left:4px solid transparent;border-right:4px solid transparent;border-radius:500px;box-shadow:0 0 50px #55579e;width:40px;height:40px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse .75s infinite linear}@-moz-keyframes spinPulse{0%{-moz-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #55579e}50%{-moz-transform:rotate(145deg);opacity:1}100%{-moz-transform:rotate(-320deg);opacity:0}}@-moz-keyframes spinoffPulse{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(360deg)}}@-webkit-keyframes spinPulse{0%{-webkit-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #55579e}50%{-webkit-transform:rotate(145deg);opacity:1}100%{-webkit-transform:rotate(-320deg);opacity:0}}@-webkit-keyframes spinoffPulse{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}
Bước 3: Tiếp tục chèn đoạn code sau vào phía sau thẻ <body> trong template.
<div id='loadhalaman'><div class='loadball'/><div class='loadball-2'/></div>
<script type='text/javascript'>
$(function() {
    var siteURL = &quot;http://&quot; + top.location.host.toString();
    var $internalLinks = $(&quot;a[href^=&#39;&quot;+siteURL+&quot;&#39;], a[href^=&#39;/&#39;], a[href^=&#39;./&#39;], a[href^=&#39;../&#39;]&quot;);
    $internalLinks.click(function() {
        $(&#39;#loadhalaman&#39;).fadeIn(300).delay(60000).fadeOut(300);
    });
    $(&#39;#loadhalaman&#39;).click(function() {
$(this).hide();});});
</script>
Bước 4: Cuối cùng lưu template lại và xem kết quả!
CHUYÊN MỤC

Bài Viết Liên Quan

Bình Luận Gần Đây

Một số lưu ý khi bình luận
● Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.
● Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin.
● Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
● Để bình luận một đoạn code, hãy mã hóa code trước nhé.