[Motion] AOS_Animate On Scroll library

michalsnik.github.io/aos/

 

트윈맥스 + 스크롤 모션의 기능을 하나로! AOS!

굳이 트윈맥스를 사용하지 않아도 되는 기능들은 AOS를 사용해도 좋다

대신 AOS와 트윈맥스+스크롤은 함께 사용하면 코드가 무거워지니 둘 중에 하나만 사용하기

 

:: 트윈맥스+스크롤을 사용할 경우

<script src="/common_file/lib/js/TweenMax.min.js"></script>
<script src="/common_file/lib/js/ScrollMagic.js"></script>
<script src="/common_file/lib/js/animation.gsap.js"></script>

:: AOS를 사용할 경우

<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>

 

 

사용법

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>

 

---

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