[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>