[TIL] 20221128 리액트 스크롤 이벤트, 브런치 스타일 웹 사이트

1. 구찌 사이트 

아주 인터렉티브 하고 재밌다.

https://marmont.gucci.com/

GG Marmont | Borse Donna | Scopri la Collezione | Gucci

 

2. 브런치 클론

브런치에서 https://brunch.co.kr/@wellend/86 이 페이지를 보면 뒷 배경이 가리면서 스크롤이 올라간다. 

이건 뒷 배경을 position: fixed로 하고 content부분을 relative로 주면 된다. 아주 쉽다.

브런치에서 메뉴가 사라졌다가 나오는거랑 로딩바 등등 따라해보고 블로그에 남기도록 하겠다.

 

 

3. 리액트에서 스크롤 이벤트 사용하기

useEffect(() => {
    window.addEventListener("scroll", listener);
    return () => {
      window.removeEventListener("scroll", listener);
    };
  });

리액트에서는 다른게 있을 줄 알았는데 똑같이 event linstener를 등록시켜서 사용한다.