Jquery.counto.js: On Scroll Count Numbers Not Onload

I'm working with one page website and I want to add a counting numbers with it, so I use javascript.countTo.js. I created every section to group related data and I put the section

Solution 1:

To check if the element is scrolled into view, I'll use function from this answer.

Now, we can check if the element #counters is in view by using below function

functionisScrolledIntoView(el) {
    var elemTop = el.getBoundingClientRect().top;
    var elemBottom = el.getBoundingClientRect().bottom;

    var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
    return isVisible;
}

This first gets the bounding points using getBoundingClientRect(). This returns top, left, bottom, right, width and height of the element on which the method is called. These can be used to detect if element is inside view. top and bottom are taken from this object and checked if element bottom is less than window height.

---

First of all, bind scroll event on the window. Inside the handler, check if element is in the view. When element comes in the view, then call the plugin on elements and unbind the scroll event.

functionisScrolledIntoView(el) {
  var elemTop = el.getBoundingClientRect().top;
  var elemBottom = el.getBoundingClientRect().bottom;

  var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
  return isVisible;
}

$(window).on('scroll', function() {
  if (isScrolledIntoView(document.getElementById('counters'))) {
    $('.ace-counter-number').countTo();

    // Unbind scroll event
    $(window).off('scroll');
  }
});

.justaddheight {
  height: 500px;
}

.text-center {
  text-align: center;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery-countto/1.2.0/jquery.countTo.js"></script><sectionclass="justaddheight text-center about"><h1>SCROLL DOWN</h1><p>First, Scroll Now</p><p>Second, try Again but wait for few seconds before scroll to identify.</p></section><sectionclass="justaddheight service"></section><sectionclass="justaddheight portfolio"></section><sectionid="counters"><divclass="ace-overlay"></div><divclass="container"><divclass="row"><divclass="col-md-3 col-sm-6 col-xs-12"><divclass="ace-counter to-animate"><iclass="ace-counter-icon icon-briefcase to-animate-2"></i><spanclass="ace-counter-number js-counter"data-from="0"data-to="89"data-speed="5000"data-refresh-interval="100">89</span><spanclass="ace-counter-label">Finished projects</span></div></div><divclass="col-md-3 col-sm-6 col-xs-12"><divclass="ace-counter to-animate"><iclass="ace-counter-icon icon-code to-animate-2"></i><spanclass="ace-counter-number js-counter"data-from="0"data-to="2343409"data-speed="5000"data-refresh-interval="50">2343409</span><spanclass="ace-counter-label">Templates</span></div></div><divclass="col-md-3 col-sm-6 col-xs-12"><divclass="ace-counter to-animate"><iclass="ace-counter-icon icon-cup to-animate-2"></i><spanclass="ace-counter-number js-counter"data-from="0"data-to="1302"data-speed="5000"data-refresh-interval="50">1302</span><spanclass="ace-counter-label">Cup of coffees</span></div></div><divclass="col-md-3 col-sm-6 col-xs-12"><divclass="ace-counter to-animate"><iclass="ace-counter-icon icon-people to-animate-2"></i><spanclass="ace-counter-number js-counter"data-from="0"data-to="52"data-speed="5000"data-refresh-interval="50">52</span><spanclass="ace-counter-label">Happy clients</span></div></div></div></div></section>

JsFiddle Demo

Solution 2:

You can use appear.js plugin which provides event triggers for elements when they appear, disappear and reappear in the viewport.

<spanclass='count'>50</span>

And the JS

appear({
  init: functioninit() {},
  elements: functionelements() {
    // Track all elements with the class "count"returndocument.getElementsByClassName('count');
  },
  appear: functionappear(el) {
    $(el).countTo({
      from: 0,
      to: $(el).html(),
      speed: 1300,
      refreshInterval: 60
    });
  },
  disappear: functiondisappear(el) {},
  bounds: 200,
  reappear: true
});