🥞 AOS

AOS 는 애니메이션을 쉽게 적용해주는 라이브러리 중 하나입니다.

기본적으로 스크롤 움직임에 따라 개체에 움직임을 주는 애니메이션의 경우,
AOS 라이브러리를 사용하면 쉽게 애니메이션을 줄 수 있습니다.
AOS 라이브러리는 자바스크립트를 쓰지 않고도 쉽게 사용하고 적용할수 있는 장점이 있습니다.

🍲기본 setting

첫 번째로 npm을 통해 AOS를 설치합니다.
Terminal 을 열고 다음의 커맨드를 입력합니다.

npm install aos   // 만약 tsx 를 쓰고 있다면 npm i @types/aos

두 번째로 AOS를 직접 적용을 해주어야 합니다.

import React, { useEffect } from "react";

import AOS from "aos";
import "aos/dist/aos.css";

const Home = () => {

  return (
    <div>
    </div>
  )
}

마지막으로 useEffect 함수를 통해 AOS 를 초기화를 해줍니다.

import React, { useEffect } from "react";
import AOS from "aos";
import "aos/dist/aos.css";

const Home = () => {
  
  useEffect(() => {
    AOS.init();
  },[])
  
  return (
    <div>
      <div data-aos="fade-up"> 나타나라 얍!! </div> // 위에서 div 가 내려옵니다.
    </div>
  )
}

🍲 옵션들

옵션	설명
data-aos	사용할 애니메이션 효과명
data-aos-easing	애니메이션 시간흐름에 따른 속도설정 옵션(default: ease)
data-aos-anchor	특정한 객체에 anchor를 설정하여, 어떤 객체를 기준으로 애니메이션이 시작될지를 설정
data-aos-delay	애니메이션 재생 대기시간 설정(default: 0)
data-aos-offset	애니메이션 효과가 시작될 객체의 위치 설정
data-aos-duration	애니메이션의 재생시간 설정(default: 400)
data-aos-anchor-placement	애니메이션이 어느 위치에서부터 적용될지 설정(default: top-bottom)
data-aos-once	스크롤 할 때마다 애니메이션이 재생될지를 설정(default: true)

🍲 data-aos : 어떤 애니메이션을 적용할 지 결정합니다.🍲

🍲대표적인 옵션 모음
fade, fade-up, fade-down ,fade-left, fade-right
fade-up-right, fade-up-left, fade-down-right, fade-down-left

나머지 옵션들은 홈페이지에서 확인해 보면 다양하게 있습니다! 참고 !!!!

AOS 라이브러리