react-animation-on-scroll 라이브러리를 활용해 React에서 간단한 스크롤 애니메이션을 구현해볼 것이다
GitHub - MetinArslanturk/react-animation-on-scroll: A react library to animate elements on scroll. It has integration with anima
A react library to animate elements on scroll. It has integration with animate.css. Supports typescript and server side rendering - GitHub - MetinArslanturk/react-animation-on-scroll: A react libra...
github.com
1. 다음 명령어로 라이브러리를 설치
npm install react-animation-on-scroll --save
#or
yarn add react-animation-on-scroll2. index.html의 head에 다음과 같이 넣어 CDN에서 파일을 불러온다
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
</head>3. 원하는 곳에 import해 애니메이션을 골라 사용한다!
import { AnimationOnScroll } from 'react-animation-on-scroll';
<AnimationOnScroll animateIn="animate__bounceIn">
<h2>Some Text</h2>
</AnimationOnScroll>
Demo 페이지에서 다양한 애니메이션들을 확인할 수 있다 다 뭔가 쓰기 애매한듯
React Animation On Scroll
www.metinarslanturk.com
다음과 같이 활용했다
import { AnimationOnScroll } from "react-animation-on-scroll";
...
<AnimationOnScroll animateIn="animate__fadeInLeftBig">
<RoadMapImg names={htmlcss} />
</AnimationOnScroll>
<AnimationOnScroll animateIn="animate__fadeInRightBig">
<RoadMapImg names={git} />
</AnimationOnScroll>
<AnimationOnScroll animateIn="animate__fadeInLeftBig">
<RoadMapImg names={computerscience} />
</AnimationOnScroll>
<AnimationOnScroll animateIn="animate__fadeInRightBig">
<RoadMapImg names={javascript} />
</AnimationOnScroll>
<AnimationOnScroll animateIn="animate__fadeInLeftBig">
<RoadMapImg names={typescript} />
</AnimationOnScroll>
<AnimationOnScroll animateIn="animate__fadeInRightBig">
<RoadMapImg names={react} />
</AnimationOnScroll>
<AnimationOnScroll animateIn="animate__fadeInLeftBig">
<RoadMapImg names={cooperation} />
</AnimationOnScroll>
...
'Front-end > React' 카테고리의 다른 글
| [TIL] Vite 환경에서 SVG 컴포넌트로 사용하기 (0) | 2022.10.11 |
|---|---|
| [TIL] CRA & TypeScript & Electron 환경 구축 (0) | 2022.07.19 |
| [TIL] React에서 utterances 구현하기 (0) | 2022.04.24 |
| [TIL] CRA & TypeScript 초기 세팅 (ESLint & Prettier) (0) | 2022.03.26 |
| [TIL] Gatsby 템플릿으로 React 홈페이지 만들기 (10) | 2022.02.10 |