Ich habe einen Zähler, der zu einer endgültigen Zahl animiert, die im HTML definiert ist. Ich möchte jedoch, dass diese Animation ausgeführt wird, sobald sie sich im Ansichtsfenster befindet.

Ich habe eingeige hier zeigt an, wie sich das Scrollen auf die Zählernummer auswirkt.

$(document).ready(function() {
      $(function($, win) {
        $.fn.inViewport = function(cb) {
          return this.each(function(i, el) {
            function visPx() {
              var H = $(this).height(),
                r = el.getBoundingClientRect(),
                t = r.top,
                b = r.bottom;
              return cb.call(el, Math.max(0, t > 0 ? H - t : (b < H ? b : H)));
            }
            visPx();
            $(win).on("resize scroll", visPx);
          });
        };
      }(jQuery, window));

      $(".fig-number").inViewport(function(px) {
        $(this).each(function() {
          $(this).prop('Counter', 0).animate({
            Counter: $(this).text()
          }, {
            duration: 1000,

            step: function(now) {
              $(this).text(Math.ceil(now));
            }
          });
        });
      });
    });

Ich habe mehrere Dinge ausprobiert, aber ich kann nicht das erreichen, wonach ich suche.

$(document).ready(function() {
  $(function($, win) {
    $.fn.inViewport = function(cb) {
      return this.each(function(i, el) {
        function visPx() {
          var H = $(this).height(),
            r = el.getBoundingClientRect(),
            t = r.top,
            b = r.bottom;
          return cb.call(el, Math.max(0, t > 0 ? H - t : (b < H ? b : H)));
        }
        visPx();
        $(win).on("resize scroll", visPx);
      });
    };
  }(jQuery, window));

  $(".fig-number").inViewport(function(px) {
    $(this).each(function() {
      $(this).prop('Counter', 0).animate({
        Counter: $(this).text()
      }, {
        duration: 1000,

        step: function(now) {
          $(this).text(Math.ceil(now));
        }
      });
    });
  });
});

html,
body {
  height: 100%;
}
#upper-push {
  height: 100%;
  width: 100%;
  display: block;
  background: red;
  color: white;
}

<div id="upper-push">
  Scroll down
</div>
<div id="numbers">
  <span class="fig-number">25</span>
  <span class="fig-number">78</span>
</div>