**** HTML
<div class="s-home-31">
<div class="container">
<div class="row row-flex">
<div class="col-6 col-md-3">
<div class="c-statistic-3">
<div class="c_icon"><i class="fa fa-calendar" aria-hidden="true"></i></div>
<div class="c_number">14</div>
<div class="c_text">Năm thành lập</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="c-statistic-3">
<div class="c_icon"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i></div>
<div class="c_number">709</div>
<div class="c_text">VILAS</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="c-statistic-3">
<div class="c_icon"><i class="fa fa-check" aria-hidden="true"></i></div>
<div class="c_number">76</div>
<div class="c_text">ĐK</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="c-statistic-3">
<div class="c_icon"><i class="fa fa-users" aria-hidden="true"></i></div>
<div class="c_number">1000</div>
<div class="c_text">KHÁCH HÀNG</div>
</div>
</div>
</div>
</div>
</div>
**** CSS
.c-statistic-3 .c_number {
color: #fff400;
margin: 0 auto 15px;
font-size: 40px;
font-weight: 700;
display: inline-block;
position: relative;
}
.c-statistic-3 .c_number::before {
content: "\f067";
position: absolute;
font-family: FontAwesome;
top: 55%;
right: -35px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-weight: 400;
font-size: 35px;
display: none;
}
.s-home-31 .col-6:first-child .c-statistic-3 .c_number::before, .s-home-31 .col-6:last-child .c-statistic-3 .c_number::before {
display: block;
}
.c-statistic-3 .c_number::after {
content: '';
display: block;
width: 12px;
height: 2px;
background-color: #fff;
margin: 0 auto;
}
.c-statistic-3 {
text-align: center;
}
.s-home-31 {
background-image: url(https://smetest.vn/images/bgs/bg-15.webp);
background-attachment: fixed;
background-position: center;
padding: 30px 0;
position: relative;
}
.s-home-31::before {
content: '';
display: block;
width: 100%;
height: 100%;
background-color: rgb(40 21 100 / 80%);
position: absolute;
top: 0;
left: 0;
}
**** JS
<script type="text/javascript">
function(n){n.fn.HTCounter=function(t){var e=n.extend({},n.fn.HTCounter.defaults,t);n(this).each(function(){n(this).prop("Counter",0).animate({Counter:n(this).text()},{duration:e.speed,easing:"swing",step:function(t){n(this).text(Math.ceil(t))}})})},n.fn.HTCounter.defaults={speed:4e3}}(jQuery);
</script>
<script type="text/javascript">
$(document).ready(function() {
var s = $(".s-home-31").offset().top - 650,
e = !1;
$(window).on("scroll", function() {
$(window).scrollTop() >= s && 0 == e && ($(".c-statistic-3 .c_number").HTCounter(), e = !0)
})
})
</script>
#-----------------------------------------#
METHOD 2:
<div class="item-number" id="number_1" data-count="100">100</div>
<div class="item-number" id="number_2" data-count="100">2000</div>
<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>
