<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section class="page-content-wrap featuredTagGen">
<div class="custom-container">
<div class="page-content">
<h3 class="titleWrapGen">B2C Lead Generation</h3>
<p class="descWrapGen">Inno Bright Tech’s B2C lead generation approach helps companies — from midsize to large enterprises — establish positive new-client relationships, revive inactive customers, and motivate repeat purchases by launching innovative, opt-in digital marketing campaigns.</p>
<div class="numberCcounterWrapper">
<ul>
<li>
<h6 class="numberWrap"> <span class="count">72</span> </h6>
<p class="descWrapping"> Lead Gen Projects in 2020 </p>
</li>
<li>
<h6 class="numberWrap"> <span class="count">245</span>K </h6>
<p class="descWrapping"> Leads Generated in 2020 </p>
</li>
</ul>
</div>
</div>
</div>
</section>
.numberCcounterWrapper {
position: relative;
padding-top: 50px;
}
.numberCcounterWrapper ul {
margin: auto;
padding: 0;
list-style: none;
text-align: center;
display: flex;
display: -ms-flexbox;
align-items: center;
justify-content: space-between;
max-width: 720px;
background-image: url(assets/images/Group-1275.svg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
}
.numberCcounterWrapper ul li {
margin: 0;
padding: 60px 90px;
}
.numberCcounterWrapper ul li .numberWrap {
margin: 0 0 10px;
color: #138883;
font-size: 50px;
line-height: 1;
}
.numberCcounterWrapper ul li .descWrapping {
margin: 0;
color: #000;
font-family: 'Montserrat';
font-weight: bold;
}
// inViewport jQuery plugin
// http://stackoverflow.com/a/26831113/383904
// Based on Fiddle: https://jsfiddle.net/2v3mq3nh/4/
// From this Answer: http://stackoverflow.com/a/36980280
$(function($, win) {
$.fn.inViewport = function(cb) {
return this.each(function(i,el){
function visPx(){
var H = $(this).height(),
r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
return cb.call(el, Math.max(0, t>0? H-t : (b<H?b:H)));
} visPx();
$(win).on("resize scroll", visPx);
});
};
}(jQuery, window));
$(".count").inViewport(function(px) { // Make use of the `px` argument!!!
// if element entered V.port ( px>0 ) and
// if prop initNumAnim flag is not yet set
// = Animate numbers
if(px>0 && !this.initNumAnim) {
this.initNumAnim = true; // Set flag to true to prevent re-running the same animation
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 3000,
step: function (now) {
$(this).text(Math.ceil(now));
}
});
}
});
