@ArtJH

Как сделать чтобы анимация срабатывалась при скроле без библиотек?

Есть например 8 одинаковых блока. Нужно чтоб при скроле на какой-нибудь из этих блоков срабатывалась анимация именно на этот блок, а другие ждали своего скрола.
Не могу понять, как написать универсальный код.
Вот как тут анимация border https://www.burgessyachts.com/ru

Ниже мой код, но он не правильный, так как при скроле на один блок, анимация срабатывается сразу на все
let element_point = $('.animate-here').offset().top;
	let element_animated = false;
	let animate_delay = 100;
	$(window).scroll(function() {
		if (!element_animated && $(window).scrollTop() + window.innerHeight > element_point + animate_delay) {
			element_animated = true;
			$('.animate-here').addClass( "animate" );
		}
	});
  • Вопрос задан
  • 87 просмотров
Пригласить эксперта
Ответы на вопрос 3
Seasle
@Seasle
Помог - отметь решением \( ゚ヮ゚)/
Если необходимо сделать множество различных анимаций да и еще на события скролла, лучше использовать GSAP и ScrollMagic. Завалялось старое демо, с тех пор GSAP обновился.
А чтобы без библиотек код написать, надо понять как расположены элементы у Вас на странице (песочницу надо).
Ответ написан
@ArtJH Автор вопроса
https://junnot.info/kak-dobavit-klass-elementu-ili...

Как сделать универсальный? Тут придется для каждого элемента прописывать
Ответ написан
sagrana
@sagrana
Вёрстка и немного кодинга)
Вам надо проверять видимость блока на экране при скролле и запускать анимацию только на нужном блоке
пример
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
31 мая 2020, в 14:11
1000 руб./за проект
31 мая 2020, в 13:31
50000 руб./за проект
31 мая 2020, в 13:31
7000 руб./за проект