반응형
Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- php
- 정보처리기사정리
- typescript
- 정보처리기사실기요약
- 리액트네이티브
- 자바스크립트 코딩테스트
- 이안의평일코딩
- 정보처리기사실기정리
- Java의정석
- 정보처리기사실기
- CSS
- 정보처리기사요약
- 타입스크립트
- ReactNative
- 코딩테스트
- 국비IT
- Oracle
- 평일코딩
- 자스코테
- 국비코딩
- 자바스크립트
- 리액트
- spring
- VUE
- javascript
- 스프링
- 오라클
- 정보처리기사
- 자바의정석
- react
Archives
- Today
- Total
이안의 평일코딩
[React] 다양한 애니메이션 모듈 react-reveal 본문
반응형
react-reveal
꽤 유용한 사이트다.
간편하게 애니메이션을 구현할 수 있다.
Home - React Reveal
React Reveal React Reveal is high performance animation library for React. It's MIT licensed, has a small footprint and written specifically for React in ES6. It can be used to create various cool reveal on scroll effects. Scroll down to see it in action.
www.react-reveal.com
먼저 터미널에 아래와 같이 입력하여 설치한다.
npm install react-reveal --save
또는
yarn add react-reveal
그리고 import를 한 뒤 컴포넌트 형태로 간편하게 사용하면 된다.
예를들어, Zoom 효과를 주고 싶다면
import Zoom from 'react-reveal/Zoom';
<Zoom>
<p>Markup that will be revealed on scroll</p>
</Zoom>
간단하고 유용하쥬?
반응형
'Front-end > React' 카테고리의 다른 글
| [React] 리액트 기본적인 내용 총 정리 (0) | 2022.07.30 |
|---|---|
| [React] 리액트 헤더 스크롤 시 CSS 변경 (2) | 2021.05.12 |
| [React] 리액트 이미지 넣는 방법 (이미지 경로) (4) | 2021.05.11 |
| [React] 리액트 IE11 익스플로러 연동 크로스 브라우징 해결 (0) | 2021.05.11 |
| [React] 리액트 설치와 초기 개발환경 셋팅 (0) | 2021.05.11 |
'Front-end/React' Related Articles
more
Comments