Задать вопрос
Mike_Ro
@Mike_Ro
Python, JS, WordPress, SEO, Bots, Adversting
javascript

Как сделать появление элементов при прокрутки до них окна браузера?

На многих сайтах замечал следующую картину. Мы прокручиваем окно браузера вниз и как только достигаем определенного div, в этом div плавно появляются блоки с текстом. Вот пример theme.co/x.
Как сделать такое появление именно в момент того, как только мы достигаем этого блока, а не сразу при загрузке страницы?
  • Вопрос задан
  • 533 просмотра
Комментировать
Подписаться 4 Оценить Комментировать
Решения вопроса 2
kn1ght_t
@kn1ght_t
основная идея в том, чтобы у нужного элемента (который надо анимировать) получать высоту (смещение) от начала страницы
затем получать высоту экрана и смещение верха экрана от верха страницы
ну и сравнивать эти значения

примерно так jsfiddle.net/wrqnw8dd/1
Ответ написан
1 комментарий
1 комментарий
userAlexander
@userAlexander
Верстка наше все)
$('.elem') это элемент на который добавим класс, elem-active это добавляемый класс, а от него уже прописываем нужные стили.
var targetElem = $('.elem');
var targetElemPos = targetElem.offset().top;
$(window).resize(function(){
	targetElemPos = targetElem.offset().top;
});
$(window).scroll(function(){
	var scrolledAtop = $(this).scrollTop();
	if(scrolledAtop > targetElemPos){
		targetElem.addClass('elem-active');
	}
});
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ответы на вопрос 2
evgeniy2194
@evgeniy2194
PHP, js developer
www.rudebox.org.ua/random-effects-scroll-to-site
Ответ написан
Комментировать
Комментировать
black_wolf1894
@black_wolf1894
Junior Front End Developer
Animate css + wow.js, если правильно понял!
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Middle JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Составить единую таблицу SQL
26 апр. 2024, в 16:51
2000 руб./в час
Сверстать 2 транзакционных письма по макету figma
26 апр. 2024, в 16:36
3000 руб./за проект
Дорисовать в Figma каталог товаров
26 апр. 2024, в 16:26
3000 руб./за проект
Ещё заказы