September 27, 2021

jquery counter on scroll

<section class="patern-bg">
          <div class="patern-bg-inner">
          <div class="container">
              
              <div class="row">
                  
                  
                  
                   <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">

                      <div class="counter-block-2 light-counter-layout counter-border">
                          
                          <i class="icon fa fa-users"></i>
                          
                          <div class="count-info">
                              <span class="counter">7000</span>
                              <p class="text-capitalize">Happy Clients</p>
                          </div>

                      </div>

                  </div> <!--  end .col-lg-3 col-md-3 col-sm-6 col-xs-12 -->
                  
                   <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">

                      <div class="counter-block-2 light-counter-layout counter-border">
                          
                          <i class="icon fa fa-smile-o"></i>
                          
                          <div class="count-info">
                              <span class="counter">35</span> 
                              <span class="counter-postfix">+</span>   
                              <p class="text-capitalize">Years Experience</p>
                          </div>

                      </div>

                  </div> <!--  end .col-lg-3 col-md-3 col-sm-6 col-xs-12 -->

                  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">

                      <div class="counter-block-2 light-counter-layout counter-border">

                          <i class="icon fa fa-forumbee"></i>
                          <div class="count-info">
                              <span class="counter">99.99</span> 
                              <span class="counter-postfix">%</span>   
                              <p class="text-capitalize">Successful Case</p>
                          </div>

                      </div>

                  </div> <!--  end .col-lg-3 col-md-3 col-sm-6 col-xs-12 -->

                   <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">

                      <div class="counter-block-2 light-counter-layout counter-border">

                          <i class="icon fa fa-trophy"></i>
                          <div class="count-info">
                              <span class="counter">1275</span>    
                              <p class="text-capitalize">Award Winners</p>
                          </div>

                      </div>

                  </div> <!--  end .col-lg-3 col-md-3 col-sm-6 col-xs-12 -->
                  
             </div>          
           
          </div>  
      </div>
      </section>

 

 .counter-block-1 {
  color: #646464;
  margin: 0 0 24px 0;
  padding: 32px 24px;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.counter-block-1 .fa {
  display: block;
  color: #dcb04d;
  opacity: 1;
  margin-bottom: 12px;
  font-size: 48px;
}
.counter-block-1 p {
  margin-top: 10px;
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 0;
  letter-spacing: 0.03em;
  position: relative;
}
.counter-block-1 .counter {
  display: inline-block;
  margin-top: 12px;
  font-size: 32px;
  font-weight: 600;
}
.counter-block-1 .counter-postfix {
  display: inline-block;
  margin-top: 0px;
  font-size: 32px;
  font-weight: 600;
}
.counter-block-1:hover .fa {
  opacity: 0.9;
}
.counter-block-1.light-counter-layout .fa,
.counter-block-1.light-counter-layout .counter,
.counter-block-1.light-counter-layout .counter-postfix,
.counter-block-1.light-counter-layout p {
  color: #FFFFFF;
}
.counter-block-2 {
  clear: both;
  padding: 24px 16px 24px 16px;
}
.counter-block-2 .icon {
  color: #7e7e7e;
  float: left;
  font-size: 36px;
  margin: 12px 16px 0 0;
}
.counter-block-2 .count-info {
  overflow: hidden;
  padding-left: 16px;
}
.counter-block-2 .counter {
  display: inline-block;
  margin-top: 0;
  font-size: 32px;
  font-weight: 600;
}
.counter-block-2 .counter-postfix {
  display: inline-block;
  margin-top: 0px;
  font-size: 24px;
  font-weight: 500;
}
.counter-block-2 p {
  margin-top: 0;
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 0;
  letter-spacing: 0;
  position: relative;
}
.counter-block-2.counter-border .count-info {
  position: relative;
}
.counter-block-2.counter-border .count-info:before {
  position: absolute;
  width: 1px;
  height: 36px;
  content: '';
  background: #82c4f9;
  top: 16px;
  left: 0;
}
.counter-block-2.light-counter-layout .icon,
.counter-block-2.light-counter-layout .counter,
.counter-block-2.light-counter-layout .counter-postfix,
.counter-block-2.light-counter-layout p {
  color: #FFFFFF;
}


 .patern-bg { background: url(pattern_A.png);}
        .patern-bg-inner{   background: #2196f3d9;   }

 

<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
        <script>
            
(function(){var t=[].indexOf||function(t){for(var e=0,n=this.length;e<n;e++){if(e in this&&this[e]===t)return e}return-1},e=[].slice;(function(t,e){if(typeof define==="function"&&define.amd){return define("waypoints",["jquery"],function(n){return e(n,t)})}else{return e(t.jQuery,t)}})(this,function(n,r){var i,o,l,s,f,u,a,c,h,d,p,y,v,w,g,m;i=n(r);c=t.call(r,"ontouchstart")>=0;s={horizontal:{},vertical:{}};f=1;a={};u="waypoints-context-id";p="resize.waypoints";y="scroll.waypoints";v=1;w="waypoints-waypoint-ids";g="waypoint";m="waypoints";o=function(){function t(t){var e=this;this.$element=t;this.element=t[0];this.didResize=false;this.didScroll=false;this.id="context"+f++;this.oldScroll={x:t.scrollLeft(),y:t.scrollTop()};this.waypoints={horizontal:{},vertical:{}};t.data(u,this.id);a[this.id]=this;t.bind(y,function(){var t;if(!(e.didScroll||c)){e.didScroll=true;t=function(){e.doScroll();return e.didScroll=false};return r.setTimeout(t,n[m].settings.scrollThrottle)}});t.bind(p,function(){var t;if(!e.didResize){e.didResize=true;t=function(){n[m]("refresh");return e.didResize=false};return r.setTimeout(t,n[m].settings.resizeThrottle)}})}t.prototype.doScroll=function(){var t,e=this;t={horizontal:{newScroll:this.$element.scrollLeft(),oldScroll:this.oldScroll.x,forward:"right",backward:"left"},vertical:{newScroll:this.$element.scrollTop(),oldScroll:this.oldScroll.y,forward:"down",backward:"up"}};if(c&&(!t.vertical.oldScroll||!t.vertical.newScroll)){n[m]("refresh")}n.each(t,function(t,r){var i,o,l;l=[];o=r.newScroll>r.oldScroll;i=o?r.forward:r.backward;n.each(e.waypoints[t],function(t,e){var n,i;if(r.oldScroll<(n=e.offset)&&n<=r.newScroll){return l.push(e)}else if(r.newScroll<(i=e.offset)&&i<=r.oldScroll){return l.push(e)}});l.sort(function(t,e){return t.offset-e.offset});if(!o){l.reverse()}return n.each(l,function(t,e){if(e.options.continuous||t===l.length-1){return e.trigger([i])}})});return this.oldScroll={x:t.horizontal.newScroll,y:t.vertical.newScroll}};t.prototype.refresh=function(){var t,e,r,i=this;r=n.isWindow(this.element);e=this.$element.offset();this.doScroll();t={horizontal:{contextOffset:r?0:e.left,contextScroll:r?0:this.oldScroll.x,contextDimension:this.$element.width(),oldScroll:this.oldScroll.x,forward:"right",backward:"left",offsetProp:"left"},vertical:{contextOffset:r?0:e.top,contextScroll:r?0:this.oldScroll.y,contextDimension:r?n[m]("viewportHeight"):this.$element.height(),oldScroll:this.oldScroll.y,forward:"down",backward:"up",offsetProp:"top"}};return n.each(t,function(t,e){return n.each(i.waypoints[t],function(t,r){var i,o,l,s,f;i=r.options.offset;l=r.offset;o=n.isWindow(r.element)?0:r.$element.offset()[e.offsetProp];if(n.isFunction(i)){i=i.apply(r.element)}else if(typeof i==="string"){i=parseFloat(i);if(r.options.offset.indexOf("%")>-1){i=Math.ceil(e.contextDimension*i/100)}}r.offset=o-e.contextOffset+e.contextScroll-i;if(r.options.onlyOnScroll&&l!=null||!r.enabled){return}if(l!==null&&l<(s=e.oldScroll)&&s<=r.offset){return r.trigger([e.backward])}else if(l!==null&&l>(f=e.oldScroll)&&f>=r.offset){return r.trigger([e.forward])}else if(l===null&&e.oldScroll>=r.offset){return r.trigger([e.forward])}})})};t.prototype.checkEmpty=function(){if(n.isEmptyObject(this.waypoints.horizontal)&&n.isEmptyObject(this.waypoints.vertical)){this.$element.unbind([p,y].join(" "));return delete a[this.id]}};return t}();l=function(){function t(t,e,r){var i,o;r=n.extend({},n.fn[g].defaults,r);if(r.offset==="bottom-in-view"){r.offset=function(){var t;t=n[m]("viewportHeight");if(!n.isWindow(e.element)){t=e.$element.height()}return t-n(this).outerHeight()}}this.$element=t;this.element=t[0];this.axis=r.horizontal?"horizontal":"vertical";this.callback=r.handler;this.context=e;this.enabled=r.enabled;this.id="waypoints"+v++;this.offset=null;this.options=r;e.waypoints[this.axis][this.id]=this;s[this.axis][this.id]=this;i=(o=t.data(w))!=null?o:[];i.push(this.id);t.data(w,i)}t.prototype.trigger=function(t){if(!this.enabled){return}if(this.callback!=null){this.callback.apply(this.element,t)}if(this.options.triggerOnce){return this.destroy()}};t.prototype.disable=function(){return this.enabled=false};t.prototype.enable=function(){this.context.refresh();return this.enabled=true};t.prototype.destroy=function(){delete s[this.axis][this.id];delete this.context.waypoints[this.axis][this.id];return this.context.checkEmpty()};t.getWaypointsByElement=function(t){var e,r;r=n(t).data(w);if(!r){return[]}e=n.extend({},s.horizontal,s.vertical);return n.map(r,function(t){return e[t]})};return t}();d={init:function(t,e){var r;if(e==null){e={}}if((r=e.handler)==null){e.handler=t}this.each(function(){var t,r,i,s;t=n(this);i=(s=e.context)!=null?s:n.fn[g].defaults.context;if(!n.isWindow(i)){i=t.closest(i)}i=n(i);r=a[i.data(u)];if(!r){r=new o(i)}return new l(t,r,e)});n[m]("refresh");return this},disable:function(){return d._invoke(this,"disable")},enable:function(){return d._invoke(this,"enable")},destroy:function(){return d._invoke(this,"destroy")},prev:function(t,e){return d._traverse.call(this,t,e,function(t,e,n){if(e>0){return t.push(n[e-1])}})},next:function(t,e){return d._traverse.call(this,t,e,function(t,e,n){if(e<n.length-1){return t.push(n[e+1])}})},_traverse:function(t,e,i){var o,l;if(t==null){t="vertical"}if(e==null){e=r}l=h.aggregate(e);o=[];this.each(function(){var e;e=n.inArray(this,l[t]);return i(o,e,l[t])});return this.pushStack(o)},_invoke:function(t,e){t.each(function(){var t;t=l.getWaypointsByElement(this);return n.each(t,function(t,n){n[e]();return true})});return this}};n.fn[g]=function(){var t,r;r=arguments[0],t=2<=arguments.length?e.call(arguments,1):[];if(d[r]){return d[r].apply(this,t)}else if(n.isFunction(r)){return d.init.apply(this,arguments)}else if(n.isPlainObject(r)){return d.init.apply(this,[null,r])}else if(!r){return n.error("jQuery Waypoints needs a callback function or handler option.")}else{return n.error("The "+r+" method does not exist in jQuery Waypoints.")}};n.fn[g].defaults={context:r,continuous:true,enabled:true,horizontal:false,offset:0,triggerOnce:false};h={refresh:function(){return n.each(a,function(t,e){return e.refresh()})},viewportHeight:function(){var t;return(t=r.innerHeight)!=null?t:i.height()},aggregate:function(t){var e,r,i;e=s;if(t){e=(i=a[n(t).data(u)])!=null?i.waypoints:void 0}if(!e){return[]}r={horizontal:[],vertical:[]};n.each(r,function(t,i){n.each(e[t],function(t,e){return i.push(e)});i.sort(function(t,e){return t.offset-e.offset});r[t]=n.map(i,function(t){return t.element});return r[t]=n.unique(r[t])});return r},above:function(t){if(t==null){t=r}return h._filter(t,"vertical",function(t,e){return e.offset<=t.oldScroll.y})},below:function(t){if(t==null){t=r}return h._filter(t,"vertical",function(t,e){return e.offset>t.oldScroll.y})},left:function(t){if(t==null){t=r}return h._filter(t,"horizontal",function(t,e){return e.offset<=t.oldScroll.x})},right:function(t){if(t==null){t=r}return h._filter(t,"horizontal",function(t,e){return e.offset>t.oldScroll.x})},enable:function(){return h._invoke("enable")},disable:function(){return h._invoke("disable")},destroy:function(){return h._invoke("destroy")},extendFn:function(t,e){return d[t]=e},_invoke:function(t){var e;e=n.extend({},s.vertical,s.horizontal);return n.each(e,function(e,n){n[t]();return true})},_filter:function(t,e,r){var i,o;i=a[n(t).data(u)];if(!i){return[]}o=[];n.each(i.waypoints[e],function(t,e){if(r(i,e)){return o.push(e)}});o.sort(function(t,e){return t.offset-e.offset});return n.map(o,function(t){return t.element})}};n[m]=function(){var t,n;n=arguments[0],t=2<=arguments.length?e.call(arguments,1):[];if(h[n]){return h[n].apply(null,t)}else{return h.aggregate.call(null,n)}};n[m].settings={resizeThrottle:100,scrollThrottle:30};return i.load(function(){return n[m]("refresh")})})}).call(this);
            </script>
         <script>
             (function(e){"use strict";e.fn.counterUp=function(t){var n=e.extend({time:400,delay:10},t);return this.each(function(){var t=e(this),r=n,i=function(){var e=[],n=r.time/r.delay,i=t.text(),s=/[0-9]+,[0-9]+/.test(i);i=i.replace(/,/g,"");var o=/^[0-9]+$/.test(i),u=/^[0-9]+.[0-9]+$/.test(i),a=u?(i.split(".")[1]||[]).length:0;for(var f=n;f>=1;f--){var l=parseInt(i/n*f);u&&(l=parseFloat(i/n*f).toFixed(a));if(s)while(/(d+)(d{3})/.test(l.toString()))l=l.toString().replace(/(d+)(d{3})/,"$1,$2");e.unshift(l)}t.data("counterup-nums",e);t.text("0");var c=function(){t.text(t.data("counterup-nums").shift());if(t.data("counterup-nums").length)setTimeout(t.data("counterup-func"),r.delay);else{t.data("counterup-nums");t.data("counterup-nums",null);t.data("counterup-func",null)}};t.data("counterup-func",c);setTimeout(t.data("counterup-func"),r.delay)};t.waypoint(i,{offset:"100%",triggerOnce:!0})})}})(jQuery);
         </script>
  
        <script>
          
jQuery(function ($) {
 
if ($(".counter").length ) {
    $('.counter').counterUp({
        delay: 10,
        time: 2000
    });
}
 
 

 

});
        </script>

 

Leave a Reply

Your email address will not be published. Required fields are marked *