[vue] Vue에서 AOS 인터랙션 라이브러리 사용하기

2020-07-28

랜딩페이지를 html로 짜다가 vue로 변환할 때, AOS를 vue 용으로 바꿔야했다.

html 구조에 있는 data-aos-*와 같은 attribute 속성들은 딱히 교체해주지 않아도 된다.

Install

  npm i aos@next

main.js에 include

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

  new Vue({
    created(){
      AOS.init({ disable: "phone" });
    },
    router,
    render: h => h(App)
  }).mount("#app");

data-aos="fade-up" : 애니메이션 효과 data-aos-duration="Number" : 속도 data-aos-delay="Number" : 딜레이 시간 data-aos-once="Boolean" : 리플레이 여부

documentation 및 star 가 많아서 꽤나 안정적인 인터랙션 라이브러리.

출처: michalsnik / aos 유용한 블로거의 Vuepress 블로그!