AOS (Animate On Scroll) 라이브러리: 커스텀 애니메이션을 쉽게

아름답고 인터랙티브한 사이트를 만드는 데 무거운 프레임워크는 필요 없습니다.
깔끔한 HTML, 현대적인 CSS, 그리고 AOS (Animate On Scroll) 같은 가벼운 도우미만 있으면
코드가 비대해지지 않으면서도 빠르고 매력적인, 프리미엄한 페이지를 만들 수 있어요.
매일 접속하는 수많은 웹사이트—정적이고 평면적이며, 솔직히 조금은 지루하지 않나요?
이제 당신의 홈페이지를 떠올려 보세요. 아주 미세한 페이드, 부드러운 회전, 가벼운 슬라이드 인만으로도
디자인은 단숨에 달라집니다. 방문자는 사이트가 살아 있고, 반응하며, 무언가 일어나고 있다고 느끼게 되죠.
그 ‘작은 디테일’이 사람들의 스크롤을 멈추게 하고 콘텐츠에 집중하게 만듭니다.

스크롤 트리거 애니메이션을 살짝 더하는 것만으로도 인상이 완전히 달라집니다.
레이아웃은 의도적이고 모던해 보이고, 브랜드는 더 정제되어 보이며,
콘텐츠는 단순히 쌓여 있는 것이 아니라 리듬과 흐름을 갖게 됩니다.
가장 좋은 점은? AOS는 가볍고 설치가 매우 쉬우며, 거대한 자바스크립트 프레임워크를 익힐 필요도 없습니다.
단 10분 투자로도 직접 만든 모션 디자인에 몇 주 들인 듯한 퀄리티를 연출할 수 있는 드문 도구예요.

아직도 경쟁사 대비 당신의 웹사이트가 ‘멈춰’ 있는 느낌이라면, 바로 이게 쉬운 개선 포인트입니다.
AOS를 추가하고 애니메이션 몇 가지를 실험해 보세요. 포트폴리오, 블로그, 쇼핑몰이
얼마나 빠르게 ‘프리미엄’해지는지 느끼실 겁니다. 스스로에게 도전해 보세요—
정보를 넘어, 기억에 남는 경험을 제공하세요.

Add CSS to your website header

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

Add JS at the end of body tag

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>  
<script type="text/javascript">
AOS.init({   
});
</script> 

HTML

<div class="box" data-aos="my-animation-1">1</div>
<div class="box" data-aos="my-animation-2">2</div>
<div class="box" data-aos="my-animation-3">3</div>
<div class="box" data-aos="my-animation-1">4</div>
<div class="box" data-aos="my-animation-2">5</div>
<div class="box" data-aos="my-animation-3">6</div>
<div class="box" data-aos="my-animation-1">7</div>
<div class="box" data-aos="my-animation-2">8</div>
<div class="box" data-aos="my-animation-3">9</div> 

CSS

/* Default Style of Boxes */
.box {
  width: 250px;
  height: 250px;
  margin: 2rem auto; 
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family:sans-serif;
  font-size: 5rem;
  color: #FFF;
}
 
/* Before of Animation 1 */
[data-aos="my-animation-1"] {
  transform: rotate(0deg);
  background: black;
  opacity: 0; 
}
/* After of Animation 1 */ 
[data-aos="my-animation-1"].aos-animate {
  transform: rotate(360deg); 
  opacity: 1; 
}
	
/* Before of Animation 2 */
[data-aos="my-animation-2"] {
  background: black;
  transition-property: background; 
}
/* After of Animation 2 */
[data-aos="my-animation-2"].aos-animate {
  background: cyan; 
}
	
/* Before of Animation 3 */
[data-aos="my-animation-3"] {
  transform: translateX(-100%);
  opacity: 0; 
}
/* After of Animation 3 */
[data-aos="my-animation-3"].aos-animate {
  transform: translateX(0%); 
  background: purple;
  opacity: 1; 
}

DEMO: How It Looks