AOS를 이용하여 애니메이션 3초만에 적용시키기

밋밋하기 짝이없는 노잼 html

 

웹이 심심하니 AOS 라이브러리를 이용하여 위에서 내려오는 애니메이션을 부탁하는 업무가 들어왔다

이런걸 js로 구현하려면 웹의 스크롤 위치와 스크롤 높이 등등을 고려해야 하지만

감자를 굴려본결과 AOS 라이브러리라는 것을 쓰면 쉽게 애니메이션을 적용할 수 있다

 

AOS 라이브러리란?
html에 쉽게 애니쓸수있음

 

 

 

<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>
$(document).ready(function () {
    AOS.init({
        disable: false,
        duration : 1000,
        offset : 300,
    });
});

 

아묻따 바로 코드적용부터 하면된다

AOS의 기본 옵션에 대한 3가지 설명은 이러하다

각 옵션의 의미

1. disable: false
   • 기본값: false
   • 의미: AOS 애니메이션이 비활성화되지 않고, 기본적으로 활성화되어 있다는 뜻입니다. 즉, 애니메이션이 모든 장치에서 작동합니다.
   • 사용 방법: 특정 조건에서 애니메이션을 비활성화하려면 disable 옵션을 true로 설정하거나, 특정 조건(예: 모바일 디바이스)에서 비활성화할 수 있습니다.
     disable: function() { return window.innerWidth < 768; }
2. duration: 1000
   • 기본값: 400 (일반적인 기본값, 라이브러리에 따라 다를 수 있음)
   • 의미: 애니메이션이 실행되는 시간(밀리초 단위)입니다. 1000 밀리초는 1초를 의미하며, 애니메이션이 1초 동안 진행됩니다.
   • 사용 방법: 이 값을 통해 애니메이션의 속도를 제어할 수 있습니다. 숫자가 클수록 애니메이션이 천천히 진행됩니다.
3. offset: 150
   • 기본값: 120
   • 의미: 애니메이션이 트리거되는 위치를 조정합니다. 이 값은 화면의 어느 정도 높이에서 애니메이션이 시작될지를 결정합니다. 300은 요소의 상단이 뷰포트의 300px 아래에 도달했을 때 애니메이션이 시작됨을 의미합니다.
   • 사용 방법: 페이지 스크롤 시 애니메이션이 언제 시작될지를 조정할 수 있습니다. 더 높은 값은 더 아래에서, 더 낮은 값은 더 위에서 애니메이션을 시작하게 만듭니다.

여튼 코드 적용했으면 html에 data-aos라는 태그를 넣어준다

<div class="item" data-aos="fade-down">
    <img src="/img/img03.png" alt="">
    <div class="title">인증시험</div>
</div>
<div class="item" data-aos="fade-down" data-aos-delay="500">
    <img src="/img/img04.png" alt="">
    <div class="title">AI성취도 평가</div>
</div>

 

data-aos-delay를 이용하면 0.5초 후에 작동되므로 따라락~ 의 효과가 있다

fade-down 외에도 fade-up, fade-in 등등 많으니 이 아래 링크에서 확인해보면 된다

 

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

AOS - Animate on scroll library

 

그 결과, 위에서 내려오는 이미지들 ㅋ 귀엽