Our script is designed to count numbers, but the issue arises when the page is refreshed and the number count starts over. We want the count to start only when a user reaches that specific number or point.
Css:-
.office{padding-right: 5px; padding-left: 5px;}
.office div{margin-bottom:5px;}
.office i {margin-right:0px;}
.office i img{width: 35px; height: 35px;}
.office div span{ font-size: 36px; position: relative; top: 10px;}
.office p{ font-size: 13px; margin:0; padding:0;}
Js:-
$(document).ready(function () {
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
});
HTML:-
<div class="row">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="col-md-12 m-b-xm">
<div class="col-xs-4 office">
<div>
<i><img src="images/office-ico.jpg" alt=""></i>
<span class="count">10</span>
</div>
<p>Offices Worldwide</p>
</div>
<div class="col-xs-4 office">
<div>
<i><img src="images/hard-ico.jpg" alt=""></i>
<span class="count" data-speed="1000">180</span>
</div>
<p>Hardworking People</p>
</div>
<div class="col-xs-4 office">
<div>
<i><img src="images/coun-ico.jpg" alt=""></i>
<span class="count">06</span>
</div>
<p>Countries Covered</p>
</div>
<div class="clearfix"></div>
</div>
</div>
Please check link to full working code:- Jsfiddle