[Vue.js] Animation on Scroll 적용 (AOS)

Vue.js

 

AOS

Animation on Scroll 스크롤을 돌릴때 적용된 컨텐츠가 애니메이션 형태로 쇼잉된다.

 

설치

npm install --save aos@next

 

적용 (main.js)

import AOS from 'aos';
import "aos/dist/aos.css";

new Vue({
    created() {
        AOS.init();
    },
  el: '#app',
  router,
  render: h => h(App)
})

적용이 완료되었다. 

사용

<div id="sec1" data-aos="fade">
	<h1>웹 개발자 김정훈입니다.</h1>
</div>

/*
<div
 data-aos="fade-up"
 data-aos-offset="200"
 data-aos-delay="50"
 data-aos-duration="1000"
 data-aos-easing="ease-in-out"
 data-aos-mirror="true"
 data-aos-once="false"
 data-aos-anchor-placement="top-center"
>   </div>
*/

애니메이션의 여러가지 옵션이 있다.

div태그 말고도 다른 태그들도 적용 가능.

 

michalsnik.github.io/aos/

AOS - Animate on scroll library

해당 사이트에서 프로퍼티 참고.