Frontend/🔨 JS

[js library] AOS 스크롤 애니메이션 구현하기

haeunkim.on 2022. 8. 10. 17:09

 

 

참고

 

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

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

inpa.tistory.com

 

aos.css
0.02MB
aos.js
0.01MB

 

 

이번에 만들고 있는 외주 사이트에서 많이 쓰이는 애니메이션 라이브러리이다. 

이 효과 하나만으로도 웹이 한층 더 다이나믹해보여서 앞으로도 자주 쓸 것 같다. 

 

 

사진이 가운데서부터 커지는 효과 

 <div class="col-lg-6 img-bg" style="background-image: url(assets/img/2.svg);" data-aos="zoom-in" data-aos-delay="100"></div>

 

아래에서 하나씩 올라오게 

 <div class="icon-box d-flex position-relative" data-aos="fade-up" data-aos-delay="100">