@el_prophettino

Событие при появлении объекта в зоне видимости?

Есть некоторые элементы, которые должны выполнять анимацию, только когда опуститься до них окно по скроллу.
Т.е. событие при появлении в зоне видимости. Как отследить?
  • Вопрос задан
  • 1353 просмотра
Решения вопроса 1
@devstudent
frontend-developer
надо измерять высоту окна, расстояние от верха окна до вашего элемента, путь пройденый скроллом , и если позиция вашего элемента + небольшой зазор (иначе срабатывать будет как только первый пиксель элемента появится из-под нижнего края окна браузера и анимации не будет заметно, она произойдет внизу ) в пикселях меньше чем расстояние пройденное скроллом + высота окна, то значит он видим на экране, можно с ним делать анимацию или еще что там
$(document).ready(function(){
			$(document).bind("scroll",function(){
				$(".scroll-appear").each(function(){
					var position = $(this).offset().top;
					var classToBeAdded = "visible";
					
					if (position+150 < $(window).scrollTop() + $(window).height()){
						$(this).addClass(classToBeAdded);
					}
					
					
					if (position+$(this).height()+600 < $(window).scrollTop() + $(window).height()){
								$(this).removeClass(classToBeAdded);
					}
						
					
				});
			});
		});
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
teknik2008
@teknik2008
Расскажите про GOLANG. Мне интересно
При загрузке (Ну если не динамический контент, который меняется сам по себе, тогда надо при каждом изменении обновлять данные), получить координаты (высоты от начала страницы и самого элемента ну и ссылку на сам элемент) всех интересующих вас элементов и положить в массив объектов. При скролле, пробегаться по массиву и находить интересующие вас элементы, которые входят в область видимости.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Сбер Санкт-Петербург
от 250 000 ₽
NewGen Vision Санкт-Петербург
от 30 000 до 60 000 ₽
от 3 000 до 4 500 €
28 нояб. 2021, в 02:45
500 руб./за проект
28 нояб. 2021, в 02:26
3000 руб./за проект
28 нояб. 2021, в 00:34
1300 руб./в час