AOS를 이용한 Parallax Scrolling

AOS를 이용한 Parallax Scrolling

패럴랙스 스크롤링은 웹사이트의 요소들이 서로 다른 속도로 움직이는 것

• 레이어별 스크롤 속도를 다르게 하여 입체감을 주는 디자인 기법
• 게임, 애니메이션 등에서 주로 사용되던 기법으로 인터랙티브한 웹사이트를 만들 때 사용
• javascript, css, 라이브러리 등을 이용하여 구현

AOS(Animate On Scroll) 란?

스크롤에 따라 요소에 애니메이션을 적용하는 라이브러리로 패럴랙스 스크롤링을 구현할 수 있음

• aos : https://michalsnik.github.io/aos/
• v1 : https://github.com/michalsnik/aos
• v2 : https://github.com/michalsnik/aos/tree/v2

AOS 설치

• 태그 내에 AOS 라이브러리를 추가

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

• 태그 닫는 태그 바로 위에 AOS 라이브러리를 추가

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
    AOS.init()
</script>

AOS 초기화

• AOS.init() : AOS를 초기화
• AOS.init({}) : AOS를 초기화하면서 옵션을 설정 (https://github.com/michalsnik/aos?tab=readme-ov-file#1-initialize-aos)

AOS 옵션

• offset : 요소가 화면에 보이기 전에 애니메이션이 시작되는 위치
• delay : 애니메이션이 시작되는 지연 시간
• duration : 애니메이션의 지속 시간
• easing : 애니메이션의 가속도
• once : 애니메이션을 한 번만 실행
• anchor-placement : 애니메이션이 실행되는 기준점

AOS 사용

- AOS 효과를 각 요소에 적용

• AOS 효과를 적용할 요소에 data-aos 속성을 추가

<div data-aos="fade-up">Fade Up</div>

• AOS 효과를 적용할 요소에 추가할 수 있는 속성

  • data-aos : 애니메이션 효과
  • data-aos-offset : 요소가 화면에 보이기 전에 애니메이션이 시작되는 위치
  • data-aos-delay : 애니메이션이 시작되는 지연 시간
  • data-aos-duration : 애니메이션의 지속 시간
  • data-aos-easing : 애니메이션의 가속도
  • data-aos-mirror : 애니메이션을 반복
  • data-aos-once : 애니메이션을 한 번만 실행
  • data-aos-anchor-placement : 애니메이션이 실행되는 기준점

<div
    data-aos="fade-up"
    data-aos-offset="200"
    data-aos-delay="50"
    data-aos-duration="1000"
    data-aos-easing="ease-in-out"
    data-aos-mirror="true"
    data-aos-once="false"
    data-aos-anchor-placement="top-center"
></div>

위와 같이 속성을 추가하면 스크롤에 따라 요소에 애니메이션 효과가 적용됩니다. 하지만 옵션이 너무 많아서 코드가 복잡해질 수 있습니다. 반복되는 코드를 줄이기 위해 자바스크립트로 옵션을 설정할 수 있습니다.

- AOS 초기화 시 옵션 설정

<div data-aos="fade-up">Fade Up</div>

AOS.init({
    offset: 200,
    delay: 50,
    duration: 1000,
    easing: 'ease-in-out',
    mirror: true,
    once: false,
    anchorPlacement: 'top-center',
})

AOS 예제