티스토리 뷰
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
여기에서도 정리를 잘해놓으셨다!
[AOS] 📚 스크롤 애니메이션 사용법 - Animate On Scroll
AOS.js (Animate On Scroll) 기본적으로 스크롤 움직임에 따라 개체에 움직임을 주는 애니메이션의 경우, AOS 라이브러리를 사용하면 쉽게 애니메이션을 줄 수 있다. AOS 라이브러리는 자바스크립트를 깊
inpa.tistory.com
'Front-end 공부하기' 카테고리의 다른 글
| [HTML] 클릭시 원하는 위치로 이동시키기 (0) | 2022.09.28 |
|---|---|
| [jQuery] $(this) 가 안될 때 (0) | 2022.09.19 |
| [CSS, jQuery] 아코디언 메뉴 만들기 (1) - toggleClass() (0) | 2022.08.01 |
| [CSS] 맨 위에 붙어있는 menu bar 만들기(전체 메뉴 drop down) - Flex box 이용 (0) | 2022.07.26 |
| [CSS] Flexbox 이해하기 (0) | 2022.07.20 |
공지사항
최근에 올라온 글