Исчезновение объектов при скролле?

Question

Подскажите пожалуйста как можно сделать так, чтобы при сролле исчезали logo, sublogo, text и link, пока не появился зеленый блок. Как на этом сайте на главной слово "Кто.__" https://toyfight.co/who/. В javascript я новичек, поэтому не могу понять как сделать. Тут код: https://jsfiddle.net/0s74jeLq/8/ . Спасибо

function readyScript() {
  window.addEventListener('scroll', elTravel);

  let srcProcent;

  function elTravel() {
    let sectorsSlide = document.querySelectorAll('.sectors__slide');

    for (let index = 0; index < sectorsSlide.length; index++) {
      const sectorSlide = sectorsSlide[index];
      const sectorSlideTop = sectorSlide.getBoundingClientRect().top + scrollY;
      const sectorSlideHeight = sectorSlide.offsetHeight;

      if (sectorSlide.classList.contains('main-block')) {
        let blockTypes = document.querySelector('.main-block__center');
        let mainBlockLogo = document.querySelector('.main-block__logo');
        let mainBlockSubLogo = document.querySelector('.main-block__sublogo');
        let mainBlockText = document.querySelector('.main-block__text');
        let mainBlockLink = document.querySelector('.main-block__link');
        let mainBlock = document.querySelector('.main-block');
        let mainBlock_2 = document.querySelector('.main-block-2');
        srcProcent = (scrollY - sectorSlideTop) / sectorSlideHeight * 100;
        if (scrollY > sectorSlideTop && scrollY < sectorSlideTop + sectorSlideHeight) {
          let blockTypesSlide = scrollY - sectorSlideTop;
          blockTypes.classList.add('_fixed');
          blockTypes.style.cssText = `transform: translate(0px,${blockTypesSlide}px);`;
          elTravelTypes();
        } else if (scrollY <= sectorSlideTop) {
          blockTypes.style.cssText = `transform: translate(0px,0px);`;
          blockTypes.classList.remove('_fixed');
          mainBlockLogo.style.cssText = `transform: translate(0px,0px);`;
          mainBlockSubLogo.style.cssText = `transform: translate(0px,0px);`;
          mainBlockText.style.cssText = `transform: translate(0px,0px);`;
          mainBlockLink.style.cssText = `transform: translate(0px,0px);`;
          mainBlock.style.cssText = `opacity: 1; min-height: 100vh; `;
          mainBlock_2.style.cssText = `opacity: 1; min-height: 100vh;`;
        } else if (scrollY >= sectorSlideTop + sectorSlideHeight) {
          blockTypes.style.cssText = `transform: translate(0px,${sectorSlideHeight}px);`;
          blockTypes.classList.remove('_fixed');
          mainBlock.style.cssText = `opacity: 0; min-height: 0;`;
          mainBlock_2.style.cssText = `opacity: 0; min-height: 400px; `;
        }
      }
    }
  }

  function elTravelTypes() {
    let mainBlockLogo = document.querySelector('.main-block__logo');
    let mainBlockSubLogo = document.querySelector('.main-block__sublogo');
    let mainBlockText = document.querySelector('.main-block__text');
    let mainBlockLink = document.querySelector('.main-block__link');
    let mainBlockTranslateLogo = 0 - 1200 / 100 * srcProcent;
    let mainBlockTranslateSubLogo = 0 - 1000 / 100 * srcProcent;
    let mainBlockTranslateOther = 0 - 600 / 100 * srcProcent;
    mainBlockLogo.style.cssText = `transform: translate(0px,${mainBlockTranslateLogo}px);`;
    mainBlockSubLogo.style.cssText = `transform: translate(0px,${mainBlockTranslateSubLogo}px);`;
    mainBlockText.style.cssText = `transform: translate(0px,${mainBlockTranslateOther}px);`;
    mainBlockLink.style.cssText = `transform: translate(0px,${mainBlockTranslateOther}px);`;
  }

  function onResize() {
    elTravel();
  }
  window.addEventListener('resize', onResize);

  elTravel();

}

window.addEventListener("load", readyScript);

.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>

БЛОГ НА HUSL

Исчезновение объектов при скролле?

Ответы (0 шт):