[React] react-reveal을 이용해서 스크롤 애니메이션 만들기

얼마전 개인 포트폴리오 페이지 제작때 아주 유용하게 사용했던 라이브러리 하나를 소개해보려한다. react-reveal는 몇줄의 코드만으로 손쉽게 스크롤 애니메이션을 구현할 수 있게끔 만들어져 있으며, 특히 공식 홈페이지에 가이드가 깔끔하게 잘되어 있기에 누구나 손쉽게 스크롤 이벤트 구현이 가능하다.

Install

npm i react-reveal --save
yarn add react-reveal

Example

import React from "react";
import styled from "styled-components";
import Fade from "react-reveal/Fade"; // Import react-reveal(Fade)

const IntroBlock = styled.div`
  margin-bottom: 135px;
  @media (max-width: 768px) {
    padding: 25px;
  }

  h1 {
    margin: 0;
    font-weight: 300;
    font-size: 45px;
    @media (max-width: 768px) {
      font-size: 30px;
    }
  }
  h3 {
    font-weight: 200;
    font-size: 15px;
  }
`;

const Introduce = () => {
  return (
    <div>
      <Fade bottom> 
        /* 위에서 Import한 Fade모듈을 컴포넌트 형태로 감싸주면
        영역 내부의 태그들만 영향을 받게 된다. 또한 top, bottom 등 방향을 설정해줄 수 있음. */
        <IntroBlock>
          <h1>
            행사 기획자에서 부터 <br />
            퍼스널 트레이너, <br />
            그리고 <strong>개발자</strong>를 꿈꾸기 까지
          </h1>
          <h3>
            Lorem Ipsum is simply dummy text of the <br />
            printing and typesetting industry. Lorem Ipsum has been <br />
            the industry's standard dummy text ever since the 1500s
          </h3>
        </IntroBlock>
      </Fade>
    </div>
  );
};

export default Introduce;

공식 홈페이지의 Tutorial 탭에서 각종 이펙트들에 대한 예제를 확인할 수 있으며, 해당 이펙트를 import 시킨 후 해당 모듈을 원하는 범위내에서 컴포넌트 형식으로 감싸주면 끝이다. 또한 옵션으로 방향을 지정해줄 수 있으며, top, bottom left 등 설정 해준 방향에 따라 사용자가 지정된 태그에 도달하면 해당 애니메이션이 수행되게된다.

(반응형에서도 정상적으로 작동된다:)