Tạo hiệu ứng số chạy tăng dần bằng HTML và Javascript đơn giản

Chào các bạn, trong quá trình làm web mình rất hay phải đáp ứng yêu cầu của khách để show các số liệu và có hiệu ứng số chạy tăng dần để làm cho website trở nên sinh động hơn. Hôm nay, mình sẽ chia sẻ cho các bạn một cách cực kỳ đơn giản để tạo hiệu ứng số chạy tăng dần bằng HTML và javascript nha!

Bài viết hướng dẫn sử dụng theme Flatsome, do đó, các bạn dùng theme Flatsome có thể làm y theo, các bạn sử dụng theme khác có thể phải tìm tòi để sửa lại code hoặc thao tác cho phù hợp.

Demo chữ chạy: http://duhoc.ninhbinhweb.top/

Bước 1: Tạo chữ số với HTML

Các bạn thực hiện sửa trang với UX builder trên theme Flatsome, chèn khối HTML tùy ý bằng cách theo dõi và làm theo như hình dưới đây:

Giuseart.com---Tạo-hiệu-ứng-số-chạy — Giuseart.com – Tạo đoạn code HTML với phần số chạy được đặt class, ID và data-count như hình.

Các bạn tạo đoạn code HTML tùy ý, bao gồm 2 phần tách rời nhau là phần chữ số chạy + phần diễn giải như hình. Trong đó, phần số chạy sẽ được đặt class=”item-number” data-count=”số muốn chạy tới“. Các bạn cứ làm y thế, chỉ thay sửa số thôi ạ! (phần chữ được tô màu xanh).

Bước 2: Copy code Javascript

Các bạn vô phần cài đặt Advanced của Flatsome – Global Setting – Footer Script, copy và dán toàn bộ code sau vào nhé!

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><br />
<script>$('.item-number').each(function () {$(this).prop('item-number',0).animate({Counter: $(this).text()}, {duration: 7000,easing: 'swing',step: function (now) {$(this).text(Math.ceil(now));}});
});</script>