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

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

Mẹo nhỏ: Để tìm kiếm chính xác các mẫu web đẹp của Ninh Bình Web, hãy search trên Google với cú pháp: "Từ khóa" + "ninhbinhweb". (Ví dụ: mẫu web bất động sản ninhbinhweb). Tìm kiếm ngay

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é!

Giuseart.com---dán-code-javascript-vào-footer-script-trong-theme-flatsome
Giuseart.com – Dán code javascript vào Footer Script trong theme Flatsome để kích hoạt hiệu ứng đếm số tăng dần

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!

5/5 - (1 bình chọn)

Thông báo chính thức: Ninh Bình Web (thuộc GiuseArt) không hợp tác với bất kỳ ai để bán giao diện Wordpress và cũng không bán ở bất kỳ kênh nào ngoại trừ Facebookzalo chính thức.

Chúng tôi chỉ support cho những khách hàng mua source code chính chủ. Tiền nào của nấy, khách hàng cân nhắc không nên ham rẻ để mua phải source code không rõ nguồn gốc và không có support về sau! Xin cám ơn!

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *