211028_스크롤 시 이미지가 나타나고 확대되는 효과

스크롤 속성 정리 페이지

개인적인 사이드 프로젝트를 준비중인데, 스크롤을 이용한 이벤트들을 구현 예정이다.

그 중의 한가지는 스크롤을 내림에 따라 원형이 나타나며 점점 화면을 가득 채우는 사이즈로 커지고, 다음 컨텐츠가 그 화면을 배경으로 자연스럽게 나타나는 효과이다.
(넘 멋진 애플의 아이폰 se 페이지!)

window 객체의 스크롤 이벤트를 사용하면 되겠다 하고 어렴풋이 생각했지만 구체적인 방법을 더 알아보았다.

구현 방법

기본적으로, 변화시킬 요소의 스타일 값을 useState를 이용해 상태로 저장하고,
위의 속성들을 이용해 현재까지의 스크롤 상태를 구한 후, if절을 통해 변화시키고 싶은 요소의 상태를 조정해준다. 그 후 변화된 상태값을 css 스타일로 해당 요소에 전달해준다.

(나는 리액트로 구현하기에 리액트의 상태 변경, 인라인 css를 활용하는 방법으로 변환하였다.)
시도한 방법1

window.addEventListener("scroll", (e) => {
  let scrolled =
    document.documentElement.scrollTop /
    (document.documentElement.scrollHeight -
      document.documentElement.clientHeight);
      ...

window.addEventListener의 scroll이벤트를 활용

위 방식으로 현재 스크롤의 상태를 구하고,

 stuff.style.width = stuff.style.height =
    document.documentElement.clientWidth *
      20 *
      (scrolled * scrolled * scrolled) +
    "px";

clientWidth와 스크롤 상태를 이용해 바꾸려는 요소의 가로,세로 넓이 지정해준다.

이후

 if (scrolled <= 0.1) {
    h1.style.opacity = (0.1 - scrolled) / 0.1;
    h1.style.marginTop = scrolled * 1000 * -1 + "px";
  } else {
    h1.style.opacity = 0;
  }

이런 식으로 if 조건절을 여러개 활용 스크롤 상태에 따른 스타일 값을 부여해준다.

시도한 방법2
(추가)