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

Question

[Михаил Р.]

На многих сайтах замечал следующую картину. Мы прокручиваем окно браузера вниз и как только достигаем определенного div, в этом div плавно появляются блоки с текстом. Вот пример theme.co/x.
Как сделать такое появление именно в момент того, как только мы достигаем этого блока, а не сразу при загрузке страницы?

Answer 1

[kn1ght_t]

основная идея в том, чтобы у нужного элемента (который надо анимировать) получать высоту (смещение) от начала страницы
затем получать высоту экрана и смещение верха экрана от верха страницы
ну и сравнивать эти значения

примерно так jsfiddle.net/wrqnw8dd/1

Comments

[Михаил Р.]

Замечательно, огромное спасибо! Буду пробовать! =)

Answer 2

[Саша]

$('.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');
	}
});

Comments

[kn1ght_t]

забыли учесть высоту экрана

[Саша]

Да, спасибо, не учел, в данном случае это нужно)

Answer 3

[Евгений Одинец]

www.rudebox.org.ua/random-effects-scroll-to-site

Answer 4

[Тимофей Белоусов]

Animate css + wow.js, если правильно понял!