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

117
Алексей,

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

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. Так же на этот класс можно повесить другую анимацию.

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

Анимация при скроллинге
Опубликовано 15 июля 2020 | Обновлено 16 июля 2020
верстка, готовый код, костыли, jquery, анимация
Похожие статьи
Анимированная svg иконка 0
Для привлечения внимания посетителей к определенному блоку на сайте, этот самый блок можно сделать а...
Читать дальше »
Алексей,
Комментарии