code Number Counter Animation scroll

code Number Counter Animation scroll

Chào các bạn, title mình hiện đang để là code Number Counter Animation scroll , nghĩa là mình sẽ chỉ các bạn code html, css, js khi kéo chuột xuống vị trí nào đó, thì các con số sẽ chạy đến 1 con số bạn đặt trước đó.

Mục đích code Number Counter Animation scroll

1. Đẹp : chủ yếu code này cho đẹp thôi, chứ cũng không có gì khác biệt hay chức năng gì cả
2. Sang Trọng: Giúp website nhìn nó có hiệu ứng sinh động, bắt mắt thôi. làm khách hàng thấy chuyên nghiệp hơn chút.

Cái gì cũng sẽ có 2 mặt của nó, đổi lại sự vẻ đẹp của nó thì website sẽ nặng hơn chút vì code js, và thư viện của nó sẽ sinh ra các lỗi nhỏ, không ảnh hưởng gì tới website cả nhưng nhìn không được hay đối với dân IT.

Bắt đầu làm nào!

Bước 1: code html trước nhé.

Các bạn thêm vào vị trí nào của webiste của bạn để chạy nhé!

<div id="counter">
<div class="counter-value" data-count="300">300</div>
</div>

Bước 2: code js để chạy nhé.

Code này bạn nên để ở file footer.php ,Nếu bạn nào sài wordpress thì tìm đến tùy chọn của theme sẽ có chố nhét js đấy :p

<script type="text/javascript">

var a = 0;

$(window).scroll(function() {
  var oTop = $('#counter').offset().top - window.innerHeight;
  if (a == 0 && $(window).scrollTop() > oTop) {
    $('.counter-value').each(function() {
      var $this = $(this),
        countTo = $this.attr('data-count');
      $({
        countNum: $this.text()
      }).animate({
          countNum: countTo
        },
        {
          duration: 2000,
          easing: 'swing',
          step: function() {
            $this.text(Math.floor(this.countNum));
          },
          complete: function() {
            $this.text(this.countNum);
            //alert('finished');
          }
        });
    });
    a = 1;
  }
});
</script>

Bước 3 Thêm Thư viện của js

Không thể thiếu thư viện được, bạn thêm thư viện này vào trong file header.php nhé,

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Vậy là xong rồi đó, các  bạn có thể kiểm tra kết quả nhé

Mình cũng có làm demo, các bạn xem thử nhé: Congdongshop.com

xong nhé anh em, thấy hay tiếc gì 1 like nhỉ phải không anh em :p

Các bạn có gì thắc mắc cứ liên hệ với mình hoặc để lại comment bên dưới, like face để có nhiều tin mới hơn nhé. mình sẽ hỗ trợ hết sức, thank you mọi người nhé!