jQuery animated number counter from zero to value

后端 未结 10 758
天涯浪人
天涯浪人 2020-11-28 04:00

I have created a script to animate a number from zero to it\'s value.

Working

jQuery

10条回答
  •  一个人的身影
    2020-11-28 04:39

    Here is my solution and it's also working, when element shows into the viewport


    You can see the code in action by clicking jfiddle

    var counterTeaserL = $('.go-counterTeaser');
    var winHeight = $(window).height();
    if (counterTeaserL.length) {
        var firEvent = false,
            objectPosTop = $('.go-counterTeaser').offset().top;
    
            //when element shows at bottom
            var elementViewInBottom = objectPosTop - winHeight;
        $(window).on('scroll', function() {
            var currentPosition = $(document).scrollTop();
            //when element position starting in viewport
          if (currentPosition > elementViewInBottom && firEvent === false) {
            firEvent = true;
            animationCounter();
          }   
        });
    }
    
    //counter function will animate by using external js also add seprator "."
     function animationCounter(){
            $('.numberBlock h2').each(function () {
                var comma_separator_number_step =           $.animateNumber.numberStepFactories.separator('.');
                var counterValv = $(this).text();
                $(this).animateNumber(
                    {
                      number: counterValv,
                      numberStep: comma_separator_number_step
                    }
                );
            });
        }
    
    
    https://jsfiddle.net/uosahmed/frLoxm34/9/
    

提交回复
热议问题