CODEWITHSUNDEEP
jquerycounterviewportonscroll
Nesta
Nesta

Reputation: 1008

Jquery number counter when visible on viewport

I have a jquery number counter that starts counting on page scroll which is fine. However I'm facing 2 problems:

1- When you load the page and don't scroll the numbers stay invisible. They should start counting up when they're visible on the viewport.

2- When you scroll the numbers start counting however they all do it including the ones that are not visible on the viewport. They should count as they come into view one at a time.

Please have a look at the demo: https://fiddle.jshell.net/5L8ue4zg/

Thank you!

JS

var a = 0;
$(window).scroll(function() {

  var oTop = $('.counter-box').offset().top - window.innerHeight;
  if (a == 0 && $(window).scrollTop() > oTop) {
    $('.counter').each(function() {
      var $this = $(this),
        countTo = $this.attr('data-count');
      $({
        countNum: $this.text()
      }).animate({
          countNum: countTo
        },

        {

          duration: 7000,
          easing: 'swing',
          step: function() {
            $this.text(Math.floor(this.countNum));
          },
          complete: function() {
            $this.text(this.countNum);
            //alert('finished');
          }

        });
    });
    a = 1;
  }

});

Upvotes: 1

Views: 2059

Answers (2)

GoldTech
GoldTech

Reputation: 21

This is the number that count from 0 to 1000

This is HTML Code.

<section class="statistics">
    <div class="statistics-content section-content">
        <div class="statistics-item">
            <h2 class="statistics-item__number">
                <span class="number" start="0">1000</span>
            </h2>
        </div>
    </div>
</section>

This is JavaScript function.

function animateValue(obj, start, end, duration) {
    let startTimestamp = null;
    const step = (timestamp) => {
      if (!startTimestamp) startTimestamp = timestamp;
      duration += 10;
      const progress = Math.min((timestamp - startTimestamp) / duration, 1);
      obj.innerHTML = Math.floor(progress * (end - start) + start);
      if (progress < 1) {
        window.requestAnimationFrame(step);
      }
    };
    window.requestAnimationFrame(step);
  }
  var flag = 0;
  const observer = new IntersectionObserver((entries) => {
    console.log("floag", flag)
    if (flag ++ > 0)
      return;
    entries.forEach((entry) => {
    if (entry.isIntersecting) {
        $('.statistics-item__number').find('.number').each(function() {
          var num = parseInt(this.innerHTML)
          var start = parseInt($(this).attr('start'));
          console.log(start);
          $(this).attr('start', num.toString());
          animateValue(this, start, num, 1000);
        });
      }
    });
  });
  const section = document.querySelector('.statistics');
  
  // Start observing the section
  if(section)
    observer.observe(section)

Upvotes: 1

Sibaram Sahu
Sibaram Sahu

Reputation: 1021

<div class="counter-box">
  <span class="counter" data-count="200">0</span>
</div>
<div class="counter-box">
  <span class="counter" data-count="500">0</span>
</div>
<div class="counter-box">
  <span class="counter" data-count="1400">0</span>
</div>
<div class="counter-box">
  <span class="counter" data-count="800">0</span>
</div>
<div class="counter-box">
  <span class="counter" data-count="1000">0</span>
</div>

Upvotes: 0

Related Questions