Анимация на событие scroll?

Question

[Артём Альбе]

Здравствуйте! Есть сайт https://www.os-design.ru/ там в блоке портфолио реализован эффект склейки фотографий при прокрутке страницы вниз и вверх. Мне нужно реализовать на сайте creart-design.ru/portfolio такой же эффект . У меня получилось сделать только склейку фотографий при скролле вниз , а вверх я не понимаю как сделать.

window.addEventListener('scroll', function() {

var portfolio_div_cord = document.getElementById('portfolio').getBoundingClientRect();
var portfolio_div_el = document.getElementById('portfolio').children;
posTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;


for ( i = 0; i <= portfolio_div_el.length; i++) {

var cord_y_top = Math.round(portfolio_div_el[i].offsetTop);

var win_height = document.documentElement.clientHeight;

if ((posTop + 400) >= cord_y_top ) {
portfolio_div_el[i].style.transform = "translateY(0)";
} else if (posTo <= cord_y_top ) {
portfolio_div_el[i].style.transform = "translateY(15px)";
}


}

});

Comments

[Павел Корнилов]

Может, изменить подход?
В css указать для изображений margin-bottom : 20px; trnsition : ...
По скроллу, в обработчике менять на margin-bottom : 0. Тем, что за кадром - возвращать 20рх.
Думаю, должно получиться, а главное - будет работать при любом скролле.

[Артём Альбе]

KorniloFF, как узнать , что за кадром ?

[Павел Корнилов]

проверять offsetY