[AOS] Animate On Scroll Library

https://michalsnik.github.io/aos/

차장님이 알려준 플러그인. 

CSS 기반이란다.

사용법도 매우 간단하고 효과도 부드럽고 예쁘다.

나는 보통 최상위 wrap 바로 밑에 감싸는 div를 따로 만들어서 id와 class를 추가한다.

그리고 aos 사이트를 보며 그때 그때 필요한 값을 주고 delay조절하면 나름 괜찮은 UI가 완성된다.

아래 소스는 내 최애 AOS소스이다.

스크립트는 function으로 묶은 이유는 tab이 있을 때 클릭 이벤트마다 넣기 편하라고 ㅎㅎ

<div id="transcroller-body" class="aos-all">

<div data-aos="fade-up" data-aos-delay="400">AOS</div>

</div>

<script>

// AOS

var myAOS = function() {

AOS.init({

   easing: 'ease-out-back',

   duration: 1500

});

}

myAOS();

</script>

---

  2019.11.14 추가

1년간 aos를 쓰면서 느낀 점은  aos는 최고라는 것이다. 

어떤 브라우저(IE9빼고)에서도 잘되고 모바일에서도 잘된다.

쓰면서 몇가지의 팁들이 생겼다. 

1. 최상위 태그에 <div id="transcroller-body" class="aos-all"> ☜이거 안넣어도 된다.

2. 그냥 쓰고 싶은 태그에 바로 data-aos 넣으면 된다.

3. 각 태그마다 포지션으로 따로 나눠놓지 않아도 된다.

4. 처음 페이지 load됐을때 높이가 중요하다.

5. 맨 하단에 더이상 스크롤 내릴게 없을 때 (ex. footer) data-aos가 나오지 않는다면, 

   data-aos-offset="-500"  을 한번 넣어본다. -500의 숫자는 그냥 감으로 넣은거다.