TIL #3 AOS란?

DO YEON KIM·2024년 4월 17일

부트캠프

목록 보기

3/72

하루 하나씩 작성하는 TIL #3

여태까지는 부트스트랩이나 노가다 CSS로 애니메이션의 효과를 주었지만 AOS는 보다 더 쉽게 애니메이션 효과를 줄 수 있다. 이또한 팀 프로젝트를 진행하면서 처음 알게 된 라이브러리다. 많이 배워 갑니다.

스크롤 움직임에 따라 개체에 움직임을 주는 애니메이션의 경우 이 AOS 라이브러리를 통해 쉽게 애니메이션을 줄 수 있다. 학부생 시절엔 JS로 열심히 타이핑해서 애니메이션 효과를 제작했던 기억이 있는데 진작 알았다면 이걸 썼을 거 같다 하하

<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>

위 두 코드를

<head></head>

사이에 입력해준 후,

</body>

바로 아래에

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

입력해주면 끝.

필자가 작성한 코드로 보자면,

 <img src="https://avatars.githubusercontent.com/u/84128786?v=4" alt="Dodo 이미지" class="mx-auto w-48 my-4"
          data-aos="zoom-in-up">

 data-aos="zoom-in-up"

class 속성안에 위와 같이 넣어주면 된다. 이 효과는 요소가 화면 안으로 스크롤 될 때 요소가 위에서 아래로 출현하면서 확대되는 효과를 생성한다. 즉, 스크롤을 내리면 이미지가 위에서 아래로 나타난다. 구체적인 애니메이션은 첨부한 링크에서 확인 가능하다.

프론트엔드 개발자를 향해서