[jQuery] 뷰포트 애니메이션 트리거 - jQuery AniView

 

#1 기능 설명

  페이지를 아래로 스크롤하면 임계값이 충족될 때(사용자 뷰포트의 하단) 각 애니메이션이 트리거 됩니다.

  data-av-animation 속성을 통해 사용하려는 것을 선언하기만 하면 됩니다.

 

 

#2 적용 및 사용 방법

연결하기

  html의 </head> 위쪽에 다음 내용을 입력해 줍니다.

<script src="https://unpkg.com/jquery-aniview/dist/jquery.aniview.js"></script>

  ※ 공식 페이지에서 파일을 다운로드할 수도 있습니다.

  공식 페이지 : https://jjcosgrove.github.io/jquery-aniview/

 

사용 방법

  공식 페이지부터 Animate.css와 함께 사용하라고 안내하고 있습니다.

$('.aniview').AniView();

  기본 작동은 '.aniview' 클래스를 가져와 실행한다는 것인데 다음과 같은 옵션 설정도 가능합니다.

var options = {
    animateClass: 'animated', 
    animateThreshold: 100,
    scrollPollInterval: 20
}
$('.aniview').AniView(options);

  animeteClass: Animate.css의 속성을 지정 (예) animate__animated

  animatieThreshold : 애니메이션 시퀀스를 지연. (마이너스 값을 입력하면 요소가 표시되기 전에 작동)

  scrollPollInterval : 스크롤 폴링 간격 (ms) 기준.

 

jQuery와 Aniamte.css를 함께 적용해서 사용합니다.

제이쿼리(jQuery) 라이브러리 연동하는 방법

CSS 애니메이션 라이브러리 - Animate.css

 

함께 사용하였을때의 예)

<div class="aniview " data-av-animation="animate__animated animate__fadeInUp animate__slow">