paralax nearsens

function parallax() {
  const mountain5 = document.querySelector(".mountain5");
  const router4 = document.querySelector(".router4");
  const clouds3 = document.querySelector(".clouds3");
  const mountain2 = document.querySelector(".mountain2");
  const bannerTextWr = document.querySelector(".banner-nearsens__text-wrapper");
  let prevScroll = 0;
  let tempScroll = 0;
  let mountain5Tr = 0;
  let mountain2Tr = 0;
  let clouds3Tr = 0;
  let router4TrY = 0;

  setTimeout(() => {
    mountain5Tr += 10;
    mountain2Tr -= 10;
    clouds3Tr -= 3;
    router4TrY += 11;
    bannerTextWr.style.opacity = 1;
    mountain5.style.backgroundPositionY = `calc(${mountain5Tr}vh + 140px)`;
    mountain2.style.backgroundPositionY = `calc(${mountain2Tr}vh + 140px)`;
    router4.style.backgroundPositionY = `calc(21% + 140px)`;
    clouds3.style.backgroundPositionY = `calc(${clouds3Tr}vh + 140px)`;
    translateRouter();
  }, 300);

  window.addEventListener("scroll", (e) => {
    tempScroll = window.scrollY;
    if (tempScroll - prevScroll > 0) {
      mountain2Tr -= mountain2Tr > -20 ? 0.3 : 0;
      router4TrY -= router4TrY > 1 ? 0.6 : 0;
      clouds3Tr -= clouds3Tr > -20 ? 0.6 : 0;

      prevScroll = window.scrollY;
    } else if (tempScroll - prevScroll < 0) {
      mountain2Tr += mountain2Tr < -10 ? 0.3 : 0;
      router4TrY += router4TrY < 11 ? 0.6 : 0;
      clouds3Tr += clouds3Tr < 3 ? 0.6 : 0;
      prevScroll = window.scrollY;
    }
    clouds3.style.backgroundPositionY = `calc(${clouds3Tr}vh + 140px)`;
    mountain2.style.backgroundPositionY = `calc(${mountain2Tr}vh + 140px)`;
    router4.style.backgroundPositionY = `calc(${router4TrY}vh + 140px)`;
  });

  function translateRouter() {
    if (document.documentElement.clientWidth > 1200) {
      router4.style.backgroundPositionX = `70%`;
    } else if (document.documentElement.clientWidth <= 1200 && document.documentElement.clientWidth > 992) {
      router4.style.backgroundPositionX = `70%`;
    }
  }
}