JQUERY.COUNTO.JS: On Scroll Count Numbers NOT OnLoad

Question

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 counter <section id="counters"> below my portfolio section <section class="justaddheight portfolio">. Everytime the page load the number count and when I scroll I always see that numbers stop or ended it's counting. Now, I want the number counts when I scroll and get into the section counter <section id="counters">. In addition, I used WOW.js and easingJS with my site, it's the best if you combined the code with it, but it also acceptable if not. The code are the following below:

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width, initial-scale=1"><!--The Viewport-->
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!--Character Set-->
        <meta http-equiv="Cache-control" content="no-cache"> <!--The No-Cache-->

        <!--///////////////////////////////////////////////////////
                            CSS 
        ///////////////////////////////////////////////////////-->
        <link rel="stylesheet" href="css/animate.min.css">
        <!-- Bootstrap -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <!-- Font-Awesome -->
        <link rel="stylesheet" href="css/font-awesome.min.css">
        <!-- Icomoon-->
        <link rel="stylesheet" href="css/icomoon.css">
        <!-- Simple Line Icons -->
        <link rel="stylesheet" href="css/simple-line-icons.css">     
        <!-- Fonts -->
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>


        <!--///////////////////////////////////////////////////////
                            JAVASCRIPT 
        ///////////////////////////////////////////////////////-->

        <!-- jQuery -->
        <script src="js/jquery.js"></script>
        <!-- Bootstrap -->
        <script src="js/bootstrap.min.js"></script>
        <!-- Wow -->
        <script src="js/wow.min.js"></script>
        <!-- Counter -->
        <script src="js/jquery.countTo.js"></script>
        <!--Easing-->
        <script src="js/jquery.easing.1.3.js"></script>        
        <!--Custom JS-->
        <script src="js/custom.js"></script>
    </head>
    <body id="top">
        <section class="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>
         <section class="justaddheight service">

        </section>
         <section class="justaddheight portfolio">

        </section>
        <section id="counters">
            <div class="ace-overlay"></div>
            <div class="container">
                <div class="row">
                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="ace-counter to-animate">
                            <i class="ace-counter-icon icon-briefcase to-animate-2"></i>
                            <span class="ace-counter-number js-counter" data-from="0" data-to="89" data-speed="5000" data-refresh-interval="50">89</span>
                            <span class="ace-counter-label">Finished projects</span>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="ace-counter to-animate">
                            <i class="ace-counter-icon icon-code to-animate-2"></i>
                            <span class="ace-counter-number js-counter" data-from="0" data-to="2343409" data-speed="5000" data-refresh-interval="50">2343409</span>
                            <span class="ace-counter-label">Templates</span>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="ace-counter to-animate">
                            <i class="ace-counter-icon icon-cup to-animate-2"></i>
                            <span class="ace-counter-number js-counter" data-from="0" data-to="1302" data-speed="5000" data-refresh-interval="50">1302</span>
                            <span class="ace-counter-label">Cup of coffees</span>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="ace-counter to-animate">
                            <i class="ace-counter-icon icon-people to-animate-2"></i>
                            <span class="ace-counter-number js-counter" data-from="0" data-to="52" data-speed="5000" data-refresh-interval="50">52</span>
                            <span class="ace-counter-label">Happy clients</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </body>
</html>

<style type="text/css">
    /* USE JUST TO ADJUST HEIGHT*/
    .justaddheight{
        height: 500px;
    }
    .text-center{
        text-align: center;
    }
</style>
<script type="text/javascript">
    $('.counter-number').countTo();
</script>

If you need to detect when it comes into view, there is an answer here http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrollinghttp://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling — inarilo, Apr 09 '17 at 16:50

score 7 · Accepted Answer · edited May 23 '17 at 12:10

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

function isScrolledIntoView(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.

function isScrolledIntoView(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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countto/1.2.0/jquery.countTo.js"></script>

<section class="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>
<section class="justaddheight service">

</section>
<section class="justaddheight portfolio">

</section>
<section id="counters">
  <div class="ace-overlay"></div>
  <div class="container">
    <div class="row">
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="ace-counter to-animate">
          <i class="ace-counter-icon icon-briefcase to-animate-2"></i>
          <span class="ace-counter-number js-counter" data-from="0" data-to="89" data-speed="5000" data-refresh-interval="100">89</span>
          <span class="ace-counter-label">Finished projects</span>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="ace-counter to-animate">
          <i class="ace-counter-icon icon-code to-animate-2"></i>
          <span class="ace-counter-number js-counter" data-from="0" data-to="2343409" data-speed="5000" data-refresh-interval="50">2343409</span>
          <span class="ace-counter-label">Templates</span>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="ace-counter to-animate">
          <i class="ace-counter-icon icon-cup to-animate-2"></i>
          <span class="ace-counter-number js-counter" data-from="0" data-to="1302" data-speed="5000" data-refresh-interval="50">1302</span>
          <span class="ace-counter-label">Cup of coffees</span>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="ace-counter to-animate">
          <i class="ace-counter-icon icon-people to-animate-2"></i>
          <span class="ace-counter-number js-counter" data-from="0" data-to="52" data-speed="5000" data-refresh-interval="50">52</span>
          <span class="ace-counter-label">Happy clients</span>
        </div>
      </div>
    </div>
  </div>
</section>

JsFiddle Demo

score 1 · Answer 2 · answered Apr 14 '17 at 02:31

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

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

And the JS

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

JQUERY.COUNTO.JS: On Scroll Count Numbers NOT OnLoad

2 Answers2

Linked