- Trang chủ
- Tham khảo
- CSS
- Thuộc tính counter-increment
Định nghĩa và sử dụng
Thuộc tính counter-increment khi sử dụng sẽ gia tăng một hoặc nhiều counter [sắp xếp có thứ tự, có hiển thị số].
Cấu trúc
tag { counter-increment: giá trị; }
Với giá trị như sau:
counter-increment | giá trị id | counter-increment: tenBatky; | Sử dụng một tên nào đó để xác định sự liên quan giữa các giá trị counter-increment và content. |
none | counter-increment: none; | Thành phần không được gia tăng. | |
inherit | counter-increment: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha [thành phần bao ngoài]. |
Ví dụ
HTML viết:
HTML/XHTML
CSS
JQUERY
JAVASCRIPT
Hiển thị trình duyệt khi chưa có CSS:
HTML/XHTML
CSS
JQUERY
JAVASCRIPT
CSS viết:
body {counter-reset: tenBatKy;} p:before { counter-increment: tenBatKy; content: counter[tenBatKy] "."; }
Hiển thị trình duyệt khi có CSS:
HTML/XHTML
CSS
JQUERY
JAVASCRIPT
Trình duyệt hỗ trợ
Thuộc tính counter-increment được hỗ trợ trong đa số các trình duyệt.
IE8 đòi hỏi phải có !Doctype
Home / Lập Trình / code Number Counter Animation scroll
01/08/2019 Lập Trình, Wordpress 2,006 Views
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
- Đẹ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ả
- 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é!
300
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
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; } }];
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é,
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é!
Tags code Number Counter Animation scroll
About admin
congdongblog.com và congdongshop.com là một nhé mọi người, trang website đều do admin là Nguyễn Trung Thông sở hữu và quản lý, với đam mê CNTT , trang này dùng để chia sẽ kinh nghiệm những gì mình có, những gì mình làm được lên đây cho mọi người cùng học nhé, có gì sai sót mọi người bỏ qua nhé
Bạn Chưa biết ?
Hướng Dẫn Khắc Phục Webstite Bị Hack Tiếng Nhật, Mã Độc, Redirect
Contentscode Number Counter Animation scrollMục đích code Number Counter Animation scrollBước 1: code html trước nhé.Bước …