Front-end 공부하기

aos 사용하기 - 스크롤시 화면에 나왔다 안나왔다 애니메이션 넣기

Chikaka 2022. 9. 5. 15:04

Aos 는 스크롤시 화면에 요소를 나왔다 안나왔다 하게 해주는 라이브러리이다.

 

사용하려면 먼저 <head>에 라이브러리 추가해주기

<link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css"> 
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

그리고 <script>에 init()코드 추가해주기!

<script>
    AOS.init();
</script>

 

그리고 애니메이션 원하는 요소에 data-aos 추가하기

<div class="wrap">
	<div data-aos="fade-down" data-aos-duration="1200" data-aos-offset="0"></div>
</div>

 

 

 

 

관련 내용은 아래에서 참고하기

https://michalsnik.github.io/aos/

 

AOS - Animate on scroll library

AOS Animate On Scroll Library Scroll down

michalsnik.github.io

 

 

여기에서도 정리를 잘해놓으셨다!

 

https://inpa.tistory.com/entry/AOS-%F0%9F%93%9A-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-Animate-On-Scroll

 

[AOS] 📚 스크롤 애니메이션 사용법 - Animate On Scroll

AOS.js (Animate On Scroll) 기본적으로 스크롤 움직임에 따라 개체에 움직임을 주는 애니메이션의 경우, AOS 라이브러리를 사용하면 쉽게 애니메이션을 줄 수 있다. AOS 라이브러리는 자바스크립트를 깊

inpa.tistory.com