Анимация при скроллинге

Простенький jQuery скрипт для добавления анимации блоков, при их появлении на экране. Можно использовать, но!, в интернете полно готовых плагинов, используйте их, не пишите/не используйте "велосипеды".

UPD: более правильным решением будет использование IntersectionObserver. На блоге есть небольшая заметка об этом. Отслеживать позицию скролла, как в скрипте ниже, это плохая идея.

JS:

(function($) {
	function animatedBlocks () {
		$('.need-animate').each(function () {
			var scrollPosTop = $(window).scrollTop(), // позиция скролла, верх страницы
				blockPosTop = $(this).offset().top, // позиция блока (верх), который нужно анимировать
				blockPosBottom = blockPosTop+$(this).height(), // позиция блока (низ), который нужно анимировать
				windowHeight = $(window).height(), // высота окна браузера
				windowLineTop = scrollPosTop+(windowHeight*(1/8)), // верхняя граница окна браузера при пересечении которой анимируется блок
				windowsLineBottom = scrollPosTop+(windowHeight*(7/8)); // нижяя граница окна браузера при пересечении которой анимируется блок

			if (
				(windowLineTop <= blockPosBottom && windowLineTop > blockPosTop) // если верхняя часть экрана выше нижней границы блока, но не прошла блок полностью
				|| (windowsLineBottom >= blockPosTop && windowsLineBottom < blockPosBottom) // если нижняя часть экрана дошла до верхней границы блока, но не прошла блок полностью
				|| ((blockPosTop > windowLineTop && blockPosTop < windowsLineBottom) || (blockPosBottom > windowLineTop && blockPosBottom < windowsLineBottom)) // или блок по центру экрана
			) {
				$(this).removeClass('need-animate').addClass('animated');
			}
		});
	}
	$(document).ready(function () {
		setTimeout(function () {
			animatedBlocks();
		}, 1000);
	});
	$(window).scroll(function () {
		animatedBlocks();
	});
})(jQuery);

CSS:

.animated{
	opacity: 1 !important;
	transition: opacity 1s;
	transition-delay: 0.25s;
}
.need-animate{
	opacity: 0 !important;
}

Просто добавьте класс need-animate к тому блоку, который должен "появиться" при прокрутке страницы. При появлении на экране у блока пропадает класс need-animate и добавляется animated. Так же на этот класс можно повесить другую анимацию.

Пример работы:

Есть вопросы или нашли ошибку? Напишите комментарий (можно без регистрации), отвечать стараюсь быстро.