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

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

Để 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ả!

0 nhận xét trong bài "Tạo hiệu ứng loading khi chuyển trang cực kì đẹp và chuyên nghiệp"

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)