AOS
Animate On Scroll Library
스크롤에 따른 애니메이션 효과를 줄 수 있게 도와주는 라이브러리
CDN
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>사용방법
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>cdn 링크 삽입
<script>
$(document).ready(function () {
AOS.init();
});
</script>스크립트에 AOS 초기화 구문 삽입
<body>
<div class="box" data-aos="fade-up">box1</div>
<div class="box" data-aos="flip-left">box2</div>
<div class="box" data-aos="zoom-in">box3</div>
<div class="box" data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1500">box4</div>
</body>AOS라이브러리에서 원하는 효과 찾아 속성으로 넣어주기.
가보자고