2

I've managed to get a simple stat counter running up from zero to a given value where it's only activated on page scroll, but it's not exactly as I was aiming for.

The problem is, all of the ".counter" elements are firing off at the same time as soon as the first element comes into view, as opposed to waiting until each individual element is actually visible on screen. So as soon at the window hits the containing div, all of them go off at once.

I'd like to have each individual .counter wait until it's fully visible before it fires off.

Here's what I've got so far:

HTML:

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="stats">
  <div class="single-stat">
    <h6 class="top-line">title</h6>
    <div class="stat-container">
      <h6 class="stat"><span class="counter" count="400"></span></h6>
    </div>
    <h6 class="bottom-line">bottom line</h6>
  </div>

  <div class="single-stat">
    <h6 class="top-line">title</h6>
    <div class="stat-container">
      <h6 class="stat"><span class="counter" count="350"></span></h6>
    </div>
    <h6 class="bottom-line">bottom line</h6>
  </div>

  <div class="single-stat">
    <h6 class="top-line">title</h6>
    <div class="stat-container">
      <h6 class="stat"><span class="counter" count="12"></span></h6>
    </div>
    <h6 class="bottom-line">bottom line</h6>
  </div>

  <div class="single-stat">
    <h6 class="top-line">title</h6>
    <div class="stat-container">
      <h6 class="stat"><span class="counter" count="97"></span></h6>
    </div>
    <h6 class="bottom-line">bottom line</h6>
  </div>

  <div class="single-stat">
    <h6 class="top-line">title</h6>
    <div class="stat-container">
      <h6 class="stat"><span class="counter" count="899"></span></h6>
    </div>
    <h6 class="bottom-line">bottom line</h6>
  </div>

  <div class="single-stat">
    <h6 class="top-line">title</h6>
    <div class="stat-container">
      <h6 class="stat"><span class="counter" count="4"></span></h6>
    </div>
    <h6 class="bottom-line">bottom line</h6>
  </div>

  <div class="single-stat">
    <h6 class="top-line">title</h6>
    <div class="stat-container">
      <h6 class="stat"><span class="counter" count="0"></span></h6>
    </div>
    <h6 class="bottom-line">bottom line</h6>
  </div>

  <div class="single-stat">
    <h6 class="top-line">title</h6>
    <div class="stat-container">
      <h6 class="stat"><span class="counter" count="6"></span></h6>
    </div>
    <h6 class="bottom-line">bottom line</h6>
  </div>
</div>

And the jQuery...

    (function($) {

  $(function() {

    var $counters = $('.counter'); //contains all elements of counter class

    var $window = $(window);

    $window.on('scroll', function(e) {
      $counters.each(function(i, elem) { //loop through each element
        if ($(this).hasClass('counted')) // check if already animated
          return;
        animateCounter($(this));
      });
    });
  });

  function animateCounter(elem) {
    var winTop = $(window).scrollTop(); // calculate distance from top of window
    var winBottom = winTop + $(window).height();
    var elemTop = $(elem).offset().top; // element distance from top of page
    var elemBottom = elemTop + $(elem).height();

    if ((elemBottom <= winBottom) && (elemTop >= winTop)) {
      $('.counter').each(function() {
        var $this = $(this);
        jQuery({
          Counter: 0
        }).animate({
          Counter: $this.attr('count')
        }, {
          duration: 3000,
          step: function() {
            $this.text(Math.ceil(this.Counter));
          }
        });
        $this.removeClass('counter').addClass('counted');
      });
    }
  }
})(jQuery);

Fiddle here: https://jsfiddle.net/ahfL4jxr/11/

Thanks in advance.

2
  • Issue is (I think) $(this) are all of the .counter elements and since it's a class selector, it will run for all. I'll dabble a bit and see if I can fix it.
    – Gezzasa
    Nov 17, 2017 at 9:49
  • literally one change :). Fixed in my answer
    – Gezzasa
    Nov 17, 2017 at 9:54

3 Answers 3

1

Ah, you were so close.

You're targeting all of the elements instead of the one in the argument you pushed through.

In your animateCounter() function, $('.counter') should change to $(elem)

https://jsfiddle.net/7xsv33hf/

1

The problem with your code was that you were correctly checking the scrolling distance, but applying the animation to all of your counters.

	(function($) {
  
	  $(function() {
    
	    var $counters = $('.counter'); //contains all elements of counter class
      
	    var $window = $(window);
      
	    $window.on('scroll', function(e) {
	      $counters.each(function(i, elem) { //loop through each element
	        if ($(this).hasClass('counted')) // check if already animated
	          return;
	        animateCounter($(this));
	      });
	    });
	  });
    
	  function animateCounter(elem) {
	    var winTop = $(window).scrollTop(); // calculate distance from top of window
	    var winBottom = winTop + $(window).height();
	    var elemTop = $(elem).offset().top; // element distance from top of page
	    var elemBottom = elemTop + $(elem).height();
      
	    if ((elemBottom <= winBottom) && (elemTop >= winTop)) {
	        var $this = elem;
	        jQuery({
	          Counter: 0
	        }).animate({
	          Counter: $this.attr('count')
	        }, {
	          duration: 3000,
	          step: function() {
	            $this.text(Math.ceil(this.Counter));
	          }
	        });
	        $this.removeClass('counter').addClass('counted');
	      
	    }
	  }
	})(jQuery);
#stats {
  font-size: 0;
}

#stats * {
  color: #000;
}

.single-stat {
  width: 45%;
  margin: 2.5%;
  display: inline-block;
  vertical-align: top;
  text-align: center;
}

.stat-container {
  position: relative;
}

.top-line {
  font-size: 30px;
  color: red;
}

.stat {
  font-size: 48px;
  margin: 0;
}

.bottom-line {
  font-size: 16px;
}

.animateBlock {
  display: inline-block;
  position: relative;
}

.animateBlock {
  opacity: 0;
}

.left.animated {
  transform: translateX(-40px);
}

.right.animated {
  transform: translateX(40px);
}

.top.animated {
  transform: translateY(-40px);
}

.bottom.animated {
  transform: translateY(40px);
}

.animated {
  animation: come-in 0.5s ease forwards;
}

@keyframes come-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    transform: translateX(0);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="stats">
  <div class="single-stat">
    <h6 class="top-line">title</h6>
    <div class="stat-container">
      <h6 class="stat"><span class="counter" count="400"></span></h6>
    </div>
    <h6 class="bottom-line">bottom line</h6>
  </div>

  <div class="single-stat">
    <h6 class="top-line">title</h6>
    <div class="stat-container">
      <h6 class="stat"><span class="counter" count="350"></span></h6>
    </div>
    <h6 class="bottom-line">bottom line</h6>
  </div>

  <div class="single-stat">
    <h6 class="top-line">title</h6>
    <div class="stat-container">
      <h6 class="stat"><span class="counter" count="12"></span></h6>
    </div>
    <h6 class="bottom-line">bottom line</h6>
  </div>

  <div class="single-stat">
    <h6 class="top-line">title</h6>
    <div class="stat-container">
      <h6 class="stat"><span class="counter" count="97"></span></h6>
    </div>
    <h6 class="bottom-line">bottom line</h6>
  </div>

  <div class="single-stat">
    <h6 class="top-line">title</h6>
    <div class="stat-container">
      <h6 class="stat"><span class="counter" count="899"></span></h6>
    </div>
    <h6 class="bottom-line">bottom line</h6>
  </div>

  <div class="single-stat">
    <h6 class="top-line">title</h6>
    <div class="stat-container">
      <h6 class="stat"><span class="counter" count="4"></span></h6>
    </div>
    <h6 class="bottom-line">bottom line</h6>
  </div>

  <div class="single-stat">
    <h6 class="top-line">title</h6>
    <div class="stat-container">
      <h6 class="stat"><span class="counter" count="0"></span></h6>
    </div>
    <h6 class="bottom-line">bottom line</h6>
  </div>

  <div class="single-stat">
    <h6 class="top-line">title</h6>
    <div class="stat-container">
      <h6 class="stat"><span class="counter" count="6"></span></h6>
    </div>
    <h6 class="bottom-line">bottom line</h6>
  </div>
</div>

https://jsfiddle.net/cndbqeck/

0

there was an error in your javascript in animateCounter() function, you did an unnecessary foreach because in the function you already passed the element you need to animate when you call it.

(function($) {

  $(function() {

    var $counters = $('.counter'); //contains all elements of counter class

    var $window = $(window);

    $window.on('scroll', function(e) {
      $counters.each(function(i, elem) { //loop through each element
        if ($(this).hasClass('counted')) // check if already animated
          return;
        animateCounter($(this));
      });
    });
  });

  function animateCounter(elem) {
    var winTop = $(window).scrollTop(); // calculate distance from top of window
    var winBottom = winTop + $(window).height();
    var elemTop = $(elem).offset().top; // element distance from top of page
    var elemBottom = elemTop + $(elem).height();

    if ((elemBottom <= winBottom) && (elemTop >= winTop)) {
      var $this = $(elem);
      jQuery({
        Counter: 0
      }).animate({
        Counter: $this.attr('count')
      }, {
        duration: 3000,
        step: function() {
          $this.text(Math.ceil(this.Counter));
        }
      });
      $this.removeClass('counter').addClass('counted');
    }
  }
})(jQuery);
#stats {
  font-size: 0;
}

#stats * {
  color: #000;
}

.single-stat {
  width: 45%;
  margin: 2.5%;
  display: inline-block;
  vertical-align: top;
  text-align: center;
}

.stat-container {
  position: relative;
}

.top-line {
  font-size: 30px;
  color: red;
}

.stat {
  font-size: 48px;
  margin: 0;
}

.bottom-line {
  font-size: 16px;
}

.animateBlock {
  display: inline-block;
  position: relative;
}

.animateBlock {
  opacity: 0;
}

.left.animated {
  transform: translateX(-40px);
}

.right.animated {
  transform: translateX(40px);
}

.top.animated {
  transform: translateY(-40px);
}

.bottom.animated {
  transform: translateY(40px);
}

.animated {
  animation: come-in 0.5s ease forwards;
}

@keyframes come-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    transform: translateX(0);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="stats">
  <div class="single-stat">
    <h6 class="top-line">title</h6>
    <div class="stat-container">
      <h6 class="stat"><span class="counter" count="400"></span></h6>
    </div>
    <h6 class="bottom-line">bottom line</h6>
  </div>

  <div class="single-stat">
    <h6 class="top-line">title</h6>
    <div class="stat-container">
      <h6 class="stat"><span class="counter" count="350"></span></h6>
    </div>
    <h6 class="bottom-line">bottom line</h6>
  </div>

  <div class="single-stat">
    <h6 class="top-line">title</h6>
    <div class="stat-container">
      <h6 class="stat"><span class="counter" count="12"></span></h6>
    </div>
    <h6 class="bottom-line">bottom line</h6>
  </div>

  <div class="single-stat">
    <h6 class="top-line">title</h6>
    <div class="stat-container">
      <h6 class="stat"><span class="counter" count="97"></span></h6>
    </div>
    <h6 class="bottom-line">bottom line</h6>
  </div>

  <div class="single-stat">
    <h6 class="top-line">title</h6>
    <div class="stat-container">
      <h6 class="stat"><span class="counter" count="899"></span></h6>
    </div>
    <h6 class="bottom-line">bottom line</h6>
  </div>

  <div class="single-stat">
    <h6 class="top-line">title</h6>
    <div class="stat-container">
      <h6 class="stat"><span class="counter" count="4"></span></h6>
    </div>
    <h6 class="bottom-line">bottom line</h6>
  </div>

  <div class="single-stat">
    <h6 class="top-line">title</h6>
    <div class="stat-container">
      <h6 class="stat"><span class="counter" count="0"></span></h6>
    </div>
    <h6 class="bottom-line">bottom line</h6>
  </div>

  <div class="single-stat">
    <h6 class="top-line">title</h6>
    <div class="stat-container">
      <h6 class="stat"><span class="counter" count="6"></span></h6>
    </div>
    <h6 class="bottom-line">bottom line</h6>
  </div>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.