Angular scroll-down animation effect directive

안녕하세요. 명동섞어찌개입니다. 

스크롤되면서 애니메이션을 주는 parallax-scrollling (시차 스크롤링)같은 효과는 이제 너무나 흔한게 되어버렸습니다. (유행한지 10년은 더 됐을듯..?) 그래서인지 구현하게 편하게 되어있는 javscript plugin 들이 꽤 많은 편이구요.

스크롤 위치에 따라 div 에 애니메이션을 주는 가장 유명한 jQuery plugin은 wayPoints (http://imakewebthings.com/waypoints/) 라는게 있죠.  

제가 파견나간 프로젝트에서 Angular 로 이 스크롤에 맞춰 나타나는 애니메이션 효과를 주려고 Angular 용 소스를 찾아봤는데 jQuery Waypoint 처럼 마땅한게 없더라구요. 그래서 직접 구현한 게 있어서 공유하려고 합니다. 

이 소스의 장점(?) 은 우선 각종 애니메이션 효과는 css 로 구현되어 있어서 가볍구요, CSS 와 directive 세팅만 하면 간단하게  사용 가능합니다. (* 참고로 animated.css 는 웹상에서 얻은 소스입니다. )

먼저 결과물 & 소스 부분입니다. (설명은 주석 참조)

 

이 소스의 사용 전 세팅 방법을 간단하게 설명드리자면

1. app 폴더와 같은 위치에 assets 폴더 > css 폴더 > animated.css 파일을 위치  시킵니다. 애니메이션 효과 css 양이 워낙 방대해서 따로 넣는게 관리하게 좋습니다.

2.  angular의 angular.json 에서 "build"의 "styles" 부분에 "src/styles.css" 아래 animated.css 경로 (여기서는 "src/assets/css/animated.css") 를 한 줄 추가합니다.

3. animate.directive.ts 를 관리하시는 directive 에 넣고, directives.module.ts 에 import 합니다. 

4. app.module.ts 에 directives.module.ts 을 import 합니다. 

5. 애니메이션 시키고자 하는 div 에 directive 를 넣어줍니다. (위 예제에서는 app.component.html 을 보시면 됩니다.)

<div animation="flipInY" delay="0" duration="500" offset="50" triggerOnce="true" class="blueBox"></div>

 

animation : 애니메이션 종류입니다. animated.css 에 정의된 class 이름들 중에서 찾아서 쓰실 수 있습니다. flipInY, bounceIn 등 다양하게 있습니다.

delay : scroll 뒤 애니메이션 실행까지의 지연 시간을 나타냅니다. 0 이면 즉시 실행, 1000 = 1초를 나타냅니다.

duration : 애니메이션 실행 시간 (1초 = 1000)

offset : 애니메이션 시작점 위치 ( 윈도우 높이 대비 0 ~ 100 (% 개념) )

triggerOnce : true - 한번만 실행, false - 스크롤 할때마다 실행

 

반복적으로 작업하는 업무에 도움이 되었길 바랍니다 ^^