This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.
Author Image Tuesday, 18 September 2018

Tạo và sử dụng hiệu ứng Ripple Loading trong thiết kế web


Thời gian chờ tải xong một trang web, một tiện ích, một ứng dụng... thật là vô bổ, và để giảm thiểu sự nhàm chán đó người ta thường thêm vào các hiệu ứng loading. Điều đó vừa tăng tính thẩm mỹ cho trang web, đồng thời cũng thể hiện sự chăm chút từ phía webmaster tới trải nghiệm người dùng.

Trong bài này tôi sẽ cùng các bạn tìm hiểu cách Tạo và sử dụng hiệu ứng Ripple Loading từ mã HTML và CSS


Cụ thể tôi sẽ áp dụng hiệu ứng này tính từ lúc người dùng truy cập vào trang cho đến khi mọi thứ đã tải xong xuôi.

Mã HTML

<div class="loading">
    <div>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>

Code CSS

<style type="text/css">
.loading{position:fixed;background:#fff;z-index:1000;top:0;left:0;width:100%;height:100%}
.loading>div{position:fixed;top:50%;left:45%}
.loading span{display:inline-block;width:20px;height:20px;background:#000;border-radius:100%;animation:loading .8s linear infinite alternate}
.loading span:nth-of-type(1){animation-delay:-.8s}
.loading span:nth-of-type(2){animation-delay:-.5s}
.loading span:nth-of-type(3){animation-delay:-.2s}
@keyframes loading{from{transform:scale(0)}to{transform:scale(1)}}
</style>

Theo mã trên hiệu ứng loading sẽ luôn nằm ở chính giữa màn hình, bây giờ ta sẽ dùng vài dòng js để xử lý.

Sự kiện khi tải xong trang (html,css,js,...) trong jQuery - $(window).on("load",function(){}) sẽ giúp ta làm điều đó

Code js

<script>//<![CDATA[
$(window).on('load', function(){
  $('.loading').fadeOut(1000);
})
//]]></script>

Bạn đặt tất cả 3 đoạn code trên càng gần thẻ <body...> càng tốt vì nó sẽ được tải trước. Code hoạt động trên mọi nền tảng nói chung và blogspot nói riêng

Ok, không có gì quá phức tạp, hi vọng với thủ thuật này bạn sẽ học thêm được một mẹo nữa trong quá trình thiết kế web để cải thiện trải nghiệm người dùng trên website của mình

Good Luck !
Comments:
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

  • Please wait while i am loading Facebook SDK js