02.01.2019

Добавление класса блокам при скроллинге

Скрипт:
 

$(window).load(function(){
  animateElems();
});
$(window).resize(function(){
  animateElems();
});
$(window).scroll(function(){
  animateElems();
});

function animateElems(){
	var scrTop = $(document).scrollTop(),
		win = {
			w: $(window).width(),
			h: $(window).height()
		};
	$('.animate').each(function(){
		var offsetTop = $(this).offset().top,
			animateOffset = 100;

		if (!$(this).hasClass('animated')) {
			if ($(this).attr('data-animate-offset')) {
				animateOffset = Number($(this).attr('data-animate-offset'));
			}
			if (scrTop > offsetTop - win.h + animateOffset) {
				$(this).addClass('animated');
				$('.counterAnimate', this).each(function(){
					var $val = $(this),
						val = Number($(this).text()),
						counter = 0;

					var interval = setInterval(function(){
						if (counter < val) {
							$val.text(counter);
							counter = counter + 1;
						} else {
							$val.text(val);
							clearInterval(interval);
						}
					}, 15);
				})
			}
		}
	});

}

 

Поделиться: