Javascript (자바스크립트) 플러그인 - AOS (스크롤에 따른 애니메이션 효과)

2022. 3. 7. 12:01

자바스크립트를 사용하면서 내가 모든 소스를 짜고 최적화와 모든 예외 상황들을 고려하여 작업을 할 수 있다면 좋겠지만 많은 리소스가 들고 또 내가 생각하지 못하는 부분들도 존재하기 때문에 간단하게 사용할 수 있는 플러그인을 많이 사용한다. 대표적인 플러그인이 슬라이더(slick, swiper 등...), 차트(chart.js, 구글차트) 등이 있다.

그리고 오늘 알아볼 AOS라는 플러그인도 스크롤에 따른 애니메이션 효과를 구현할 때 많이 쓰인다.

1. AOS 란?

AOS는 Animate on scroll library의 약자로 스크롤을 이용한 애니메이션 효과를 구현하는 플러그인이다. 스크롤을 내리는 위치에 따라 내가 지정한 영역이 fade효과와 더불어 아래쪽에서 올라오거나 왼쪽에서 오른쪽으로 이동하거나 하는 효과를 구현할 수 있다.

AOS에서 구현하는 애니메이션 효과는 css3 transition과 transform을 사용하며 작동한다.

2. AOS 사용 방법

AOS를 사용하기 위해서는 aos.css 파일과 aos.js 파일이 필요하다.

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

aos 페이지에서 관련 내용을 CDN으로 가져올 수도 파일을 다운 받을 수도 있다.

<head>
  <link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css">
</head>
<body>
  <div class="wrap">
    <div class="section">
      <div data-aos="fade-up"></div>
    </div>
  </div>
  
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
</body>

위와 같이 AOS css와 js 파일을 문서에 연결시킨 다음 바로 aos를 실행 시킬 수 있는 것은 아니다.

script 태그 안에 AOS의 초기화를 선언해줘야 비로소 AOS를 사용할 수 있다.

<head>
  <link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css">
</head>
<body>
  <div class="wrap">
    <div class="section">
      <div data-aos="fade-up"></div>
    </div>
  </div>
  
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
  <script>
    AOS.init();  // 초기화 선언 필수
  </script>
</body>

위와 같이 aos.js 파일 뒤에 AOS.init()을 통해 AOS 초기화를 선언해줘야 aos효과를 적용할 수 있다.

3. AOS 사용 방법 (옵션 값)

AOS 페이지에 이미 너무 자세히 예시와 함께 나와있기 때문에 간단하게 많이 사용하는 옵션 값을 정리하자면

1. data-aos : aos의 기본 효과를 선언한다. (fade-up, fade-down, fade-right, fade-left, fade-up-right, zoom-in, flip-up...와 같은 방향, 효과 설정)

2. data-aos-duration : aos를 통한 애니메이션의 움직임 시간을 설정한다. (data-aos-duration이 길수록 애니메이션 효과가 느리가 나타난다.)

3. data-aos-delay : 특정 스크롤 위치에 도달했을 때 애니메이션 효과가 나타나야 하지만 스크롤 위치에 도달 후에 일정 시간동안의 지연을 주고 싶을 때 사용한다.

<head>
  <link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css">
</head>
<body>
  <div class="wrap">
    <div class="section">
      <div data-aos="fade-up"></div> <!-- fade-up 효과로 나타난다. -->
      <div data-aos="fade-down" data-aos-duration="1000"></div> <!-- fade-down 효과로 1초간의 시간동안 나타난다. -->
      <div data-aos="fade-left" data-aos-delay="2000"></div> <!-- fade-left 효과로 2초간의 시간 지연 후에 나타난다. -->
    </div>
  </div>
  
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
</body>

참고

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

저작자표시 비영리

'Frontend > Javascript' 카테고리의 다른 글

Javascript (자바스크립트) 활용 - 타이팅 효과(텍스트 입력) (0)	2023.11.13
Javascript (자바스크립트) - 호이스팅 (변수 호이스팅, 함수 호이스팅) (0)	2022.08.01
Javascript (자바스크립트) 활용 - 팝업(popup) 구현 (0)	2021.12.30
Javascript (자바스크립트) 활용 - 스크롤시 고정되는 영역 만들기 (0)	2021.06.24
Javascript (자바스크립트) - 높이, 너비 구하기 (offsetHeight, clientHeight, scrollHeight, offsetWidth...) (0)	2021.04.25

About Web