parallax

관측자가 어떤 천체를 동시에 두 지점에서 보았을 때 생기는 방향의 차
UX적으로 사용자가 지루하지 않게 만들어주는 효과
스크롤 내릴떄 뒷배경의 재밌는 움직임

  const [position, setPosition] = useState(0);

  function onScroll() {
    setPosition(window.scrollY);
  }

  useEffect(() => {
    window.addEventListener("scroll", onScroll); // window에 아예 설치를 해버렸기 때문에 언마운트될때도 작동 안하게 삭제해줘야함 -> return
    return () => {
      window.removeEventListener("scroll", onScroll); // 언마운트 되기 직전에 이 이벤트가 제거됨.
      //  이걸 안해주면 메모리 누수.
    };
  }, []);

// 인라인 스타일로 조져준다.
 <div className="bg bg1" style={{ backgroundPositionY: position / 2 }}>
        <div>Welcome</div>
      </div>

 <p
        className="desc3"
        style={{
          opacity: (position - 700) / 150, // 서서히 나타내기 위해서
        }}
      >
        Nisi officia voluptate qui ullamco eiusmod occaecat sunt velit.
      </p>

<img
        src={item1}
        className="item"
        alt=""
        style={{
          transform: `translateY(${position / 2}px)`,
        }}
      />