스크롤에 반응하는 애니메이션 구현하기

스크롤이 내려가면 아래에 있는 컨텐츠들이 효과로 보이는 것 구현하기

참고 블로그를 보고, 팀 프로젝트에 구현한 코드중 일부만 발췌했습니다.

const LandingThird = (): JSX.Element => {
  
  const isElementUnderBottom = (el: any, triggerDiff: any) => {
    const { top } = el.getBoundingClientRect();
    const { innerHeight } = window;
    return top > innerHeight + (triggerDiff || 0);
  };

  const handleScroll = () => {
    const contents = document.querySelectorAll('.up-on-scroll');
    contents.forEach((content: any) => {
      if (isElementUnderBottom(content, -200)) {
        content.style.opacity = '0';
        content.style.transform = 'translateY(100px)';
      } else {
        content.style.opacity = '1';
        content.style.transform = 'translateY(0px)';
      }
    });
  };

  window.addEventListener('scroll', handleScroll);

  return (
    <>
      <StyledH2>빚다에서 무엇을 할 수 있나요?</StyledH2>

      <RowFlexBoxDiv className="up-on-scroll">
        {card.map((info) => (
          <ColumnFlexBox key={info.desc}>
            <ImageWithText info={info} css={styleImg} />
          </ColumnFlexBox>
        ))}
      </RowFlexBoxDiv>

      <Link to="/drinks/list">
        <LandingBtn text="전통주 보러가기" />
      </Link>
    </>
  );
};

코드 설명

위의 코드에서 isElementUnderBottom는함수는 element가 스크린 아래쪽에 있는지를 검사한다. 스크린 아래에 있으면 true를 반환할것이고, 스크린보다 위에 있으면 false를 반환한다.

handleScroll은 스크롤되면 발생하면 실행된다. querySelectorAll DOM를 사용해서 up-on-scroll라는 이름의 class를 모두 가져온다. 가지고 온 각각의 element가 화면보다 아래에 있다면 opacity: 0, transform: translateY(70px) 스타일이 적용되도록 하고, 화면 안에 있다면 opacity: 1, transform: translateY(0px) 스타일이 적용되도록 한다.