angular5에서 scroll reveal 사용법

안녕하세요.

오늘은 Angular5에서 ng-scrollreveal 사용법에 대해서 알아보겠습니다.

ng-scrollreveal는 쉽게 스크롤 애니메이션을 적용할 수 있도록 도와주는 라이브러리 입니다.

목적

• Angular5에서 ng-scrollreveal 사용해보기

작업 순서

1. angular-cli를 사용하여 angular5 프로젝트를 생성하고 실행해봅니다.
2. 생성한 프로젝트에 ng-scrollreveal 플러그인을 설치하고 적용합니다.

angular5 프로젝트 생성 및 실행
(node.js, npm, angular-cli가 설치되어 있다는 가정하에 설명합니다.)

• angular-cli를 사용하여, angular5 project를 생성합니다. 프로젝트명은 scrollreveal-sample-app으로 합니다.
  - $ ng new scrollreveal-sample-app
• 프로젝트가 생성되면 해당 프로젝트 안으로 진입합니다.
  - $ cd scrollreveal-sample-app
• npm 명령어를 사용하여 실행에 필요한 패키지를 설치합니다.
  - $ npm i (npm install 명령과 동일)
• 아래 명령어를 사용하여 angular-cli로 생성한 프로젝트를 실행합니다.
  - $ ng serve
  
  
  
  

ng-scrollreveal 설치 및 적용

• 아래 명령어를 사용하여 scrollreveal을 설치합니다.
  - $ npm install scrollreveal --save
  - $ npm install --save @types/scrollreveal
  - $ npm install --save ng-scrollreveal
  (반드시 3개 모두 설치해야 합니다.)
  
  
• angular-cli.json 파일에 script 영역에 아래와 같이 추가합니다.
  "script": [
      "../node_modules/scrollreveal/dist/scrollreveal.js"
  ]
  
  
• app.module.ts 파일에 NgsRevealModule을 import 합니다.
  
  
  
  
  
• 스크롤 애니메이션을 사용할 컴포넌트에서 사용합니다.
  
  
  
  (app.component.html)
  
  
  (app.component.css)

참조

• https://www.npmjs.com/package/ng-scrollreveal
• https://github.com/jlmakes/scrollreveal