Подскажите пожалуйста как можно сделать так, чтобы при сролле черного блока постепенно(пока скролишь) исчезали вверх logo, sublogo, text и link, пока не появился зеленый блок. Как на этом сайте https://toyfight.co/who/ . Тут код: https://jsfiddle.net/qagz4vwe/22/ . Спасибо
window.addEventListener("load", readyScript);
function readyScript() {
window.addEventListener('scroll', elTravel);
let srcProcent;
let go = true;
function elTravel() {
let pageScreens = document.querySelectorAll('.sectors__slide');
for (let index = 0; index < pageScreens.length; index++) {
const pageScreen = pageScreens[index];
const pageScreenTop = pageScreen.getBoundingClientRect().top + scrollY;
const pageScreenHeight = pageScreen.offsetHeight;
if (pageScreen.classList.contains('main-block')) {
let blockTypes = document.querySelector('.main-block__content');
let mainBlock = document.querySelector('.main-block');
let mainBlock_2 = document.querySelector('.main-block-2');
srcProcent = (scrollY - pageScreenTop) / pageScreenHeight * 100;
if (scrollY > pageScreenTop && scrollY < pageScreenTop + pageScreenHeight) {
let blockTypesSlide = scrollY - pageScreenTop;
blockTypes.classList.add('_fixed');
blockTypes.style.cssText = `transform: translate(0px,${blockTypesSlide}px);`;
} else if (scrollY <= pageScreenTop) {
blockTypes.style.cssText = `transform: translate(0px,0px);`;
blockTypes.classList.remove('_fixed');
mainBlock.style.cssText = `opacity: 1; min-height: 100vh; `;
mainBlock_2.style.cssText = `opacity: 1;min-height: 100vh;`;
} else if (scrollY >= pageScreenTop + pageScreenHeight) {
blockTypes.style.cssText = `transform: translate(0px,${pageScreenHeight}px);`;
blockTypes.classList.remove('_fixed');
mainBlock.style.cssText = `opacity: 0; min-height: 0;`;
mainBlock_2.style.cssText = `opacity: 0; min-height: 100px; `;
}
}
}
}
function onResize() {
go = true;
elTravel();
}
window.addEventListener('resize', onResize);
elTravel();
}
.sectors__content {
background: #161616;
}
.main-block {
min-height: 100vh;
transition: all 0.6s ease 0s;
}
.main-block__content {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 590px;
height: 100vh;
}
.main-block__center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0px 0px 0px 30px;
position: relative;
}
.main-block__logo {
color: #ffffff;
font-size: 55px;
transform: scale(1);
}
.main-block__sublogo {
color: #ffffff;
font-size: 44px;
}
.main-block__text {
color: #ffffff;
font-size: 34px;
}
.main-block__link {
color: #ffffff;
font-size: 24px;
}
.green-block {
background-color: #00ff00;
min-height: 590px;
}
<div class="sectors__content">
<div class="sectors__slide main-block">
<div class="container">
<div class="main-block__content">
<div class="main-block__center">
<div class="main-block__logo">
ЛОГО
</div>
<div class="main-block__sublogo">sublogo</div>
<div class="main-block__text">text</div>
<a href="" class="main-block__link"><span>button</span></a>
</div>
</div>
</div>
</div>
<div class="sectors__slide main-block-2"></div>
<div class="sectors__slide green-block"></div>
</div>