페이지 스크롤 시 효과 나타내기 - AOS(Animate On Scroll Library)

웹 페이지를 스크롤 시 효과를 나타내게 구현을 하려면 복잡하고 코드가 길어져 구현하기 어려운 부분이 많습니다. 하지만, 이번 시간에 알아 볼 AOS(Animate On Scroll Libary)를 사용하면, 복잡하고 긴 코드를 구현하지 않아도, 쉽게 웹 페이지를 스크롤 시 효과가 나타나는 것을 구현할 수 있습니다.

 

먼저, 본인의 웹 페이지에 적용하기 위해, 여기를 눌러 AOS(Animate On Scroll Libary) 페이지에 방문하여 적용하거나, 아래의 코드를 HTML 파일에 붙여넣어 바로 사용할 수 있습니다.

 

<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>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
AOS.init();
</script>

 

AOS(Animate On Scroll Libary)에는 여러가지 스크롤 효과가 존재합니다. 모든 스크롤 효과는 다음과 같습니다. 아래 내용은 AOS(Animate On Scroll Libary) GitHub에서 확인할 수 있습니다.

Animations

• Fade animations:

  • fade
  • fade-up
  • fade-down
  • fade-left
  • fade-right
  • fade-up-right
  • fade-up-left
  • fade-down-right
  • fade-down-left

• Flip animations:

  • flip-up
  • flip-down
  • flip-left
  • flip-right

• Slide animations:

  • slide-up
  • slide-down
  • slide-left
  • slide-right

• Zoom animations:

  • zoom-in
  • zoom-in-up
  • zoom-in-down
  • zoom-in-left
  • zoom-in-right
  • zoom-out
  • zoom-out-up
  • zoom-out-down
  • zoom-out-left
  • zoom-out-right

Anchor placements:

• top-bottom
• top-center
• top-top
• center-bottom
• center-center
• center-top
• bottom-bottom
• bottom-center
• bottom-top

Easing functions:

• linear
• ease
• ease-in
• ease-out
• ease-in-out
• ease-in-back
• ease-out-back
• ease-in-out-back
• ease-in-sine
• ease-out-sine
• ease-in-out-sine
• ease-in-quad
• ease-out-quad
• ease-in-out-quad
• ease-in-cubic
• ease-out-cubic
• ease-in-out-cubic
• ease-in-quart
• ease-out-quart
• ease-in-out-quart

 

페이지를 스크롤 하고, 보이는 화면이 div일 때, 스크롤을 하는 효과를 예시로 적용하여 보겠습니다. AOS(Animte On Scroll Libary)를 적용한 전체 예시는 다음과 같습니다.

• data-aos: 적용 할 애니메이션 효과의 이름
• data-aos-duration: 적용 할 애니메이션의 효과 지속 시간(ms) 단위
• ex) 1500ms -> 1.5초

<div data-aos="fade-up" data-aos-duration="1500">
	<div class="example">
    	<p>Example</p>
    </div>
</div>

 

위 예시와 같이 적용하게 되면, 'fade-up' 효과가 '1500ms(1.5초)' 만큼 적용하게 됩니다. 위 내용에 대해 더 궁금한 점이 있다면 댓글로 남겨주세요. 감사합니다.