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

Question

[Даниил Сухих]

Есть у меня на странице товары хочу сделать что-бы они появлялись когда скролл доходит до них.
Сделал скрипт но он делает так что появляются все элементы как сделать что-бы появлялся именно тот на котором скролл?

$('.product').css({'opacity': '0'})
	$(window).scroll(function() {
  	var pos = $(window).scrollTop();
    var prod = $('.product');
    var prodPos = prod.position().top;
    var windoww = $(window).height();
    if (pos > prodPos - (windoww - 100)) {
       prod.animate(({'opacity': '1'}))
    }
  });

Comments

[Максим Тимофеев]

при появлении его в поле зрения экрана?

у экрана нет зрения

[Антон]

in-view js

Answer 1

[ljutaev]

https://github.com/michalsnik/aos - вот )

Comments

[Даниил Сухих]

Я хочу что-бы работал мой вариант...

Answer 2

[Евгений]

Попробуйте так

var product = $('.product').css({'opacity': '0'});

product.each(function(){
	var prod = $(this);
	var prodPos = prod.position().top;
	$(window).scroll(function() {
		var pos = $(window).scrollTop();
		var windoww = $(window).height();
		if (pos > prodPos - (windoww - 100)) {
		   prod.animate(({'opacity': '1'}))
		}
	})
});