Animacja liczb podczas przewijania strony.

Question

Witam serdecznie.

Znalazłem w internecie taki kod, który bardzo dobrze realizuje animację "liczenia w górę":

$('.count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 4000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});

Ale chciałbym, aby uruchamiał się dopiero po zjechaniu na stronie w odpowiednie miejsce.

Co mógłbym dodać, aby to działało w taki sposób?

Pozdrawiam.

Answer 1

Nie jest to intuicyjne rozwiazanie, ale dziala. Link

Comments

Niestety to mi nie działa. :/

Answer 2

Uporałem się z pomocą tego kodu:

$(document).ready(function() {
   var counterTop = $('.mainImgArrow').offset().top;

   var count = function(){
   var scrollTop = $(window).scrollTop();

   if (scrollTop > counterTop) {
     $('.count').each(function() {
      var $this = $(this),
          countTo = $this.attr('data-count');
      
      $({ countNum: $this.text()}).animate({
        countNum: countTo
      },

      {

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

      });  
    });
   };
   };

   count();

   $(window).scroll(function() {
      count();
   });
   });

Pozdrawiam.