[react] scroll-snap-type 옵션, react-intersection-observer 기본 활용

 

이력서와 포폴용으로 사이트를 만들기 위해서 초기 세팅을 하고 컴포넌트를 스크롤로 이동하면서
이동 시 해당 컴포넌트의 애니메이션을 추가하고 싶어서 CSS의 scroll-snap-type 와
react-intersection-observer 옵션을 활용해서 적용해봤다.

 

두 가지 기능을 사용한 이유

한 번 스크롤를 해서 한 번에 다음 컴포넌트가 보여지도록 하고 싶었고

스크롤이 되고 컴포넌트가 화면에 보여지는 순간 준비됐던 애니메이션이나 효과들이 적용되었으면 해서

팀프로젝트에서 사용했던 경험과 검색을 통해서 찾은 2가지 기능으로 아주 간단하게만 적용시켜봤다.

 

 

1.  scroll-snap-type

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type

scroll-snap-type - CSS: Cascading Style Sheets | MDN

mdn에서 설명된 내용(번역기를 돌린)을 간략히 정리하자면

- 이 속성은 스냅 포인트가 있는 경우 스크롤 컨테이너에 얼마나 엄격하게 적용되는지를 설정합니다.

- 사용할 수 있는 속성들

/* Keyword values */
scroll-snap-type: none;
scroll-snap-type: x;
scroll-snap-type: y;
scroll-snap-type: block;
scroll-snap-type: inline;
scroll-snap-type: both;

/* Optional mandatory | proximity*/
scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: both mandatory;

/* Global values */
scroll-snap-type: inherit;
scroll-snap-type: initial;
scroll-snap-type: revert;
scroll-snap-type: revert-layer;
scroll-snap-type: unset;

여기서 사용하고자 했던 옵션은 y 축 옵션인데 나의 경우 mandatory를 사용했다.

 

아주 간단하게 웹의 스크롤 바가 아닌 마우스의 스크롤 키를 사용해서 비교해보면

mandatory는 한 번 스크롤을 해도 다음 컨텐츠가 보이도록 넘어가지만

mandatory

proximity는 일정 스크롤 이상을 해야 다음 컨텐츠로 넘어가며 컨텐츠와 컨텐츠 사이에 멈출 수도 있다.

proximity

 

각 컨텐츠에 scroll-snap-align: start로 옵션을 주면 스크롤을 했을 시 컨텐츠의 위치가 방향의 시작점이 되도록 지정할 수 있다.

center로 했을 시 컨텐츠가 전체 화면보다 작다면 가운데에 나타나게 된다.

나의 경우 100vh로 옵션을 줘서 컨텐츠들이 화면을 가득 채울 수 있도록 지정해줬다.

 

2.  react-intersection-observer

https://www.npmjs.com/package/react-intersection-observer

react-intersection-observer

이 라이브러리를 활용해서 브라우저의 viewport에 지정 div가 보여질 때 css 옵션들을 적용시킬 수 있다.

 

아래 코드로 해당 div(Wrapper)가 보여질 때 inView (boolean 값)을 받아 투명도를 조절시켰다.

import styled from "@emotion/styled";
import { useInView } from "react-intersection-observer";

const Container = styled.div`
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  align-items: center;
  background-color: skyblue;
`;

const Wrapper = styled.div`
  display: flex;
  justify-content: center;
  margin-top: 6rem;
  opacity: 0;
  transition: all 1s ease-in-out;

  &.isActive {
    opacity: 1;
  }
`;

export default function About() {
  const [ref, inView] = useInView({
  // 라이브러리 옵션
    threshold: 0,
  });

  return (
    <Container>
      <Wrapper ref={ref} className={inView ? "isActive" : ""}>
        ABOUT
      </Wrapper>
    </Container>
  );
}

 

마무리

간단하게 투명도에만 사용만 해봤지만 이미지나 도형의 위치 등을 css 옵션으로 지정해두고 해당 컨텐츠가 보여질 때 이동하거나 나타나는 등의 특징을 줄 수 있을 것 같다.