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

Đóng góp bởi: Lê Thiện 901 lượt xem Đăng ngày 24/10/2023

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

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!

Trả lời

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 *

Mẫu web mới đăng

Mời bạn xem một số mẫu web mới đăng của Toptheme.info | NinhBinhweb