"Number Counter when in viewport"
Bootstrap 4.1.1 Snippet by anmolv886

<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)); } }); } });

Related: See More


Questions / Comments: