Counter Value on Scroll | How To Pass Counter Value On Page Scroll
HTML -
<div class="col-md-6 col-lg-6 col-sm-12 counterDiv1">
<div class="counter-box-field wow fadeInUp" data-wow-delay="0.2s">
<h2 class="bs-heading typ-banner-heading">
Our Accomplishments
</h2>
<div class="counter-box wow fadeInUp" data-wow-delay="0.3s">
<div class="row">
<div class="col-md-6">
<div class="counter-text">
<h1><span class="counter" data-count="25000"></span></h1>
<p class="bs-paira typ-banner-paira missionipaira">EMPLOYEES</p>
</div>
</div>
<div class="col-md-6">
<div class="counter-text">
<h1><span class="counter" data-count="120"></span></h1>
<p class="bs-paira typ-banner-paira missionipaira">COUNTRIES</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="counter-text">
<h1> <span class="counter" data-count="15"></span><span>+</span> </h1>
<!-- <h1><span>15</span> +</h1> -->
<p class="bs-paira typ-banner-paira missionipaira">R&D CENTRES</p>
</div>
</div>
<div class="col-md-6">
<div class="counter-text">
<!-- <h1>800000</h1> -->
<h1> <span class="counter" data-count="800000"></span></h1>
<p class="bs-paira typ-banner-paira missionipaira">LIVES IMPACTED</p>
</div>
</div>
</div>
</div>
</div>
</div>
JS :
var countedDiv1 = false;
function isScrolledIntoView(elem) {
var $elem = $(elem);
var $window = $(window);
var docViewTop = $window.scrollTop();
var docViewBottom = docViewTop + $window.height();
var elemTop = $elem.offset().top;
var elemBottom = elemTop + $elem.height();
return elemBottom <= docViewBottom && elemTop >= docViewTop;
}
function counter() {
$(window).scroll(function () {
if (countedDiv1 == false && $(".counterDiv1").length > 0) {
//counterDiv One
if (isScrolledIntoView(".counterDiv1")) {
$(".counterDiv1 .counter").each(function () {
var $this = $(this),
countTo = $this.attr("data-count");
$({ countNum: $this.text() }).animate(
{ countNum: countTo },
{
duration: 3000,
easing: "linear",
step: function () {
$this.text(Math.floor(this.countNum));
},
complete: function () {
$this.text(this.countNum);
},
}
);
});
countedDiv1 = true;
}
}
});
}
0 Comments