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: //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:
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é!
1 2 3 | <script src="//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> |
Lưu ý giúp mình, nếu muốn số chạy chậm lại thì các bạn thay sửa giá trị trong mục duration:7000 nhé!
Bước 3: Lưu lại và hưởng thành quả
Vậy là xong rồi, chúc các bạn thành công nhé! Ai rảnh test luôn giúp mình với, có khúc mắc hay lỗi gì vui lòng comment giúp mình luôn nha!
