counter on element in viewport
by vi161
HTML
<p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p >11111111111</p><p class="num">123</p>
JavaScript
$.fn.isInViewport = function() {
var elementTop = $(this).offset().top;
var elementBottom = elementTop + $(this).outerHeight();
var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};
$(window).on('resize scroll', function() {
$('.num').animate({ num: 9.2 - 0/* - начало */ }, {
duration: 5000,
step: function (num){
this.innerHTML = (num + 0).toFixed(1)
}
})
});