ScrollTop

- 페이지의 위치를 인식하여 어떠한 동작을 하게 하기 위해 사용한다.

(1) 예시

 - sctop라는 변수가 500이 넘으면 ani클래스에 on이라는 클래스를 추가하고 아니면 제거한다는 스크립트를 작성했다.

 - 위 코드를 입력해서 스크롤을 내리다가 어느 지점이 되면 ani라는 클래스가 5초동안 30배 확대된다.

(2) 예제

-  (1)의 조건과 동일한 스크립트를 작성했고, 위 코드를 실행하면 일정 위치가 되면 이미지들이 opacity가 0에서 1로 각각에 걸려있는 transition에 맞게 바뀐다.

(3) AOS(Animate On Scroll Library) 사용

 - 더욱 편리하게 사용하는 방법이다. (출처 :  https://github.com/michalsnik/aos  / https://michalsnik.github.io/aos/)

 

 - 위의 링크를 들어가면 모양에 따른 클래스명들과 사용방법을 알수있다.

  -  AOS를 작성해도 동일한 결과가 나왔으며, (2)에서 직접 스크립트를 작성하고 한것에 비해 간편해졌다.