[Vue.js] Animation Of Scroll[AOS] 스크롤 움직임에 따라 적용 요소 애니메이션화

안녕하세요, 주인장입니다.

프로젝트를 하다가 리액트에서 스크롤 감지 및 사진 팝업 애니메이션을 했던거에 비해(사실 애니메이션보다는 함수에 적용해서 효과를 넣은것이 대부분의 리액트에서 적용하는 방법입니다) 뷰에서는 aos라는 라이브러리를 설치하여 사용하기에 나처럼 뷰 프로젝트에 투입되어서 뷰와 친해지는 사람들을 위한 포스팅을 하려고 벨로그를 열었습니다.

일단, vue.js에서 스크롤을 감지하여 적용요소들을 애니메이션으로 띄우게 하는 방법을 이번 벨로그로 알아볼 것입니다.

1. 어쩌다가 AOS를 건드리셨나요?

스크롤을 내리면 이미지랑 스토리 내용이 바꿔서 스토리 형식으로 화면을 구현해야하는데 Vue에서는 경험이 없다보니 이걸 사진을 바꿔뜨도록 구현해야하나?하면서 잘 몰랐습니다. 리액트에서는 제이쿼리를 쓰는 방법도 있긴 한데, 처음엔 뷰에서 vuetify 쓸려고 했지만 구현하려는 것에 비해 쫌...ㅋㅋㅋ 그래서 aos라는 좋은 라이브러리를 찾아서 적용하였습니다.

(1) 설치

npm install --save aos@next

(2) Main.js aos 적용

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

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

(3) 사용기

<div data-aos="fade-up"></div>

이렇게 사용을 하면 됩니다. 더 많은 애니메이션 옵션이 있는 aos 사이트를 공유드립니다!
https://michalsnik.github.io/aos/