vue - AOS(Animate On Scroll) 라이브러리

개요

프로젝트 진행 중 스크롤 애니메이션을 추가해보려 관련 라이브러리를 찾아보았다.
이 글은 vue.js 3버전에서 AOS라는 라이브러리를 사용법하는 방법에 대한 글이다.

---

설치

npm install aos@2.3.4 # 마지막 정식 배포 버전이 2.3.4버전이다

---

main.js 수정

import { createApp } from 'vue';
import App from './App.vue';
import AOS from 'aos';
import 'aos/dist/aos.css';

// Vue 앱 생성
const app = createApp(App);

// AOS 초기화
app.mount('#app');

AOS.init();

---

사용 예시

<template>
    <div data-aos="fade-up" >나타날때 올라오는 요소</div>
</template>

적용 화면

---

참고

1. aos 다양한 효과 demo
2. aos 공식 github