[CSS]React에서 스크롤시 화면 변화

❗필요!

React에서 scroll 했을 때 애니메이션 효과는 useState, useEffect으로 만들 수 있습니다.

import React, { useState, useEffect } from "react";

또한 CSS 라이브러를 사용하면 애니메이션을 더 편하게 사용할 수 있습니다.

npm install animate.css --save

import "animate.css/animate.min.css";

animate.css의 자세한 사용법은 다음 사이트를 참고해 주세요

https://animate.style/

Animate.css | A cross-browser library of CSS animations.

 

📍useEffect을 사용해서 handleScroll함수 만들기

Scroll시 스크롤 된 높이에 알맞는 함수를 실행시키는 함수를 만들기 위해 높이를 저장할 수 있는 변수를 useState를 이용해서 만들어 줍니다.

const [scrollPosition, setScrollPosition] = useState(0);

다음으로 useEffect을 사용해서 스크롤이 될때마다 높이를 저장하는 Hook을 만들어 줍니다.

useEffect(() => {
    function handleScroll() {
      setScrollPosition(window.pageYOffset);
    }
    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

높이를 저장하는 Hook을 만들었다면 높이에 맞춰 애니메이션을 실행해 주는 useEffect을 하나 더 만들어 줍니다.

  const [isMapVisible, setIsMapVisible] = useState(false);
  const [isReqVisible, setIsReqVisible] = useState(false);  
  
  useEffect(() => {
    if (scrollPosition > 1100) {//scrollPosition1100이상일때 
      setIsReqVisible(true);//Req를 보이게 하기
    } else {
      setIsReqVisible(false);/Req를 안 보이게 하기
    }
    if (scrollPosition > 400 && scrollPosition <= 1900) {//scrollPosition400이상이고 1900미만일때
      setIsMapVisible(true);//Map를 보이게 하기
    } else {
      setIsMapVisible(false);//Map를 안 보이게 하기
    }
  }, [scrollPosition]);

 

🏹CSS에 애니메이션 추가하기

위에 만들었던 isReqVisible의 값에 따라 애니메이션을 실행시키기 위해 CSS로 state를 전달합니다.

  <Reqdiv isReqVisible={isReqVisible}>

참 거짓에 따라 animate.css 라이브러리를 추가해줍니다.
👉저는 element가 보이는 높이가 되면 왼쪽에서 나타나고 안 보이는 구간쯤에서는 오른쪽으로 사라지도록 애니메이션을 넣어 주었습니다.

 const Reqdiv = styled.div`
  transi
  animation: ${({ isReqVisible }) =>/*삼항 연산자로 애니메이션 설정*/
    isReqVisible ? "fadeInLeft 2s" : "fadeOutRight 2s"};
    /*fadeInLeft 2s 2초동안 왼쪽에서 나타나기*/
    /*fadeInLeft 2s 2초동안 오른쪽으로 사라지기*/
`;

물론 직접 CSS를 작성해서 애니메이션 효과를 넣을 수도 있습니다.

<Mapdiv className={`${isMapVisible ? "fade-in" : "fade-out"}`}>
{/*조건식에 따라 CSS실행*/}


const Mapdiv = styled.div`
  opacity: 0;//투명속성
  visibility: hidden;//가시성
  transition: all 2s;//초
  &.fade-in {
    opacity: 1;
    visibility: visible;
  }
  /*아무것도 없는 것에서 fade-in이 실행되면 Mapdiv가 보이게 됩니다. */