AOS.js (Animate On Scroll) 를 사용해보자

 

 

 

 

https://michalsnik.github.io/aos/

 

AOS - Animate on scroll library

 

 

1. cdn 넣기 

 - css

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

 - js

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

 

2. AOS.init(); 넣기

<script>
	AOS.init();
</script>

 

init를 적어줘야 동작한다.

안에 속성들은 밑에 링크로 하나씩 써보면 재미있답니다!

 

AOS . init ( ) ; // 초기화

// 나열된 기본 설정 
// 선택적 설정 개체를 전달할 수도 있습니다 
AOS . init ( { 
  // 전역 설정: 
  disable : false ,  // 다음 값 허용: 'phone', 'tablet', 'mobile', boolean, expression 또는 function 
  startEvent : 'DOMContentLoaded' ,  // 디스패치된 이벤트의 이름 AOS가 
  initClassName 에서 초기화해야 한다는 문서 : 'aos-init' ,  // 초기화 후 클래스가 적용됨 
  animationClassName : 'aos-animate' ,  // 애니메이션에 적용된 클래스 
  useClassNames :false ,  // true인 경우 스크롤 시 클래스로 'data-aos' 콘텐츠를 추가합니다. disableMutationObserver 
  : false , //  자동 돌연변이 감지를 비활성화합니다(고급) 
  debounceDelay : 50 ,  // 창 크기를 조정하는 동안 사용되는 디바운스 지연(고급 ) 
  throttleDelay : 99 ,  // 페이지를 스크롤하는 동안 사용되는 스로틀 지연(고급)
  

  // `data-aos-*` 속성에 의해 요소별로 재정의할 수 있는 설정: 
  offset : 120 ,  // 원래 트리거 포인트에서 오프셋(px) 
  delay : 0 ,  // 0에서 3000 사이의 값 , 단계 50ms 
  duration : 400 ,  // 0에서 3000 사이의 값, 단계 50ms 
  easing : 'ease' ,  // AOS 애니메이션에 대한 기본 여유 
  once : false ,  // 애니메이션이 한 번만 발생해야 하는지 여부 - 아래로 스크롤하는 동안 
  mirror : false ,  // 요소를 지나 스크롤하는 동안 요소에 애니메이션 효과를 줄지 여부
  anchorPlacement : 'top-bottom' ,  // 애니메이션을 트리거해야 하는 창과 관련된 요소의 위치를 ​​정의합니다.

} ) ;

 

 

https://github.com/michalsnik/aos

 

GitHub - michalsnik/aos: Animate on scroll library

 

3. 요소에 원하는 date-aos 옵션 속성 넣기

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 data-aos="00000000"></div>

 

내가 원하는 애니메이션을 date-aos 안에 넣어주면 된다.

사이트에 들어가서 애니메이션 미리보기도 가능하다.

 

하지만 단점! 

지정된 애니메이션 이외에는 수정해서 사용할 수 없다는 점,,,!

하지만 종류가 많으니 잘 사용할 수 있을 것 같다~~🌞