화면의 홈 부분 스크롤 시 컨텐츠 서서히 흐리게 만들기 / 전체가 다 흐려지는 오류 해결

웹 페이지의 메뉴를 빼면 제일 상단을 home부분으로 만들어 놓았다.

스크롤을 통해 화면의 아래로 내려갈 때 home 부분의 색상을 서서히 흐려지게 만드는 기능을 추가해보려고 한다.

홈 화면의 스크롤 시 이벤트를 적용할 때 구해야 되는 값들

• 우선 Element.getBoundingClientRect()를 이용해서 home영역의 크기를 구하기
• 또 window.scrollY의 값을 구해서 위에서 구한 home 영역을 이용해서 이벤트를 걸기

수도코드

1. home화면의 영역을 해당 element, 즉 home의 top/y와 bottom을 구한 뒤, 그 둘의 차를 구한다.
2. 그리고 window의 scrollY 값도 구해 놓는다.
3. 조건문을 통해 window의 scrollY value가 위의 home의 영역값보다 클 경우 opacity를 적용해 놓은 클래스를 추가한다.

document.addEventListener('scroll', () => {
  // home의 y축의 시작, 끝을 구한다.
  // 그리고 시작에서 끝으로 갈 때 opacity값을 단계별로 줄여준다.
  const scrollY = window.scrollY;
  const homeStartY = home.getBoundingClientRect().height;
  const hemoEndY = home.getBoundingClientRect().bottom;
  const homeHeigth = hemoEndY - homeStartY;

  if (scrollY > homeHeigth) {
    home.classList.add('home--fadeout');
  } else {
    home.classList.remove('home--fadeout');
  }
});

.home--fadeout {
  transition: all var(--animation-duration) ease-in-out;
  opacity: 0.5;
}

위의 코드로 작성해서 실행을하면, 우선
서서히 흐려지는 효과를 줘야되는데 한 번에 급작스럽게 투명하게 바뀌는 문제가 발생한다.

그리고 가장 큰 문제는 배경은 제외하고, 안의 컨텐츠들만 적용시켜야되는데 배경까지 흐려지고 있다 😱

위의 문제를 어떻게 하면 스크롤링 될 수록 점점 투명해지게 해결 할 수 있을까?

아래와 같이 영역을 구해서 opacity를 지정했는데 잘 되지 않았다..

document.addEventListener('scroll', () => {
  // home의 y축의 시작, 끝을 구한다.
  // 그리고 시작에서 끝으로 갈 때 opacity값을 단계별로 줄여준다.
  const scrollY = window.scrollY;
  const homeStartY = home.getBoundingClientRect().height;
  const hemoEndY = home.getBoundingClientRect().bottom;

  const homeHeigth = hemoEndY - homeStartY;

  if (homeStartY === 0) {
    home.style.opacity = '1';
  } else if (400 < homeStartY && homeStartY / 2 < hemoEndY) {
    home.style.opacity = '0.5';
  } else {
    home.style.opacity = '0';
  }
});

문제를 차근차근 생각하기

먼저, home부분의 heigth를 구한다음 영역을 나눠서 opacity를 적용시켜봐야될 거 같다.

1. 스크롤 이벤트가 일어날 때 home부분의 높이가 어떻게 되는지 확인하기

document.addEventListener('scroll', () => {
  const homeHeigth = home.getBoundingClientRect().height;
  console.log(homeHeigth);
});

---

지금 이벤트도 잘 발생하고, 홈의 높이를 구했으니까 다음으로 생각해봐야 될 게 투명도 부분을 어떻게 처리할지이다.

1의 opacity가 0이면 완전하게 투명하고, 1이면 불투명이다.
--> window.scroolY가 점점 크면 클 수록 home의 영역에서 나누어서 opacity를 적용해주면 될 거 같다.

console.log(1 - window.scrollY / homeHeigth);

요렇게 영역을 줘서 opacity를 적용하면 서서히 흐려지게 만들 수 있을 거 같다!!!

---

home.style.opacity = 1 - window.scrollY / homeHeigth;

이제 완벽하게 될거 같았지만, 한가지 문제가 발생했다. 배경은 그대로 두고, 안의 컨텐츠들만 흐리게 적용하고 싶었지만, 배경도 흐려지는 오류가 발생했다!

스크롤 시 배경색도 같이 흐려지는 오류 😢

---

오류 해결!

오류를 해결하기 위해 기존 section으로만 감싸져 있던 태그 안에 div태그를 넣어서 그 태그 안에 컨텐츠 내용들을 옮겨주었다.

스크롤시 배경색이 동일하게 변경 안된 것을 확인할 수 있다 :)