스크롤 이벤트 애니메이션 사용하기

head.sub.php에 script와 css파일 추가해주기

<script src="https://wowjs.uk/dist/wow.min.js"></script>
<link rel="stylesheet" href="https://wowjs.uk/css/libs/animate.css">

원하는 곳에 아래 코드 넣기

<div data-wow-delay="0.5s" class="wow flash">
	내용
</div>

data-wow-duration: 애니메이션 진행시간

data-wow-delay: 애니메이션 지연시간(설정시간만큼 기다린 후 애니메이션 동작)

data-wow-offset: 애니메이션 시작거리(스크롤이 어느정도 진행되었을때 애니메이션이 시작될지.. 브라우저 창 아래에서 얼만큼 나와야 시작되는지와 같다 숫자가 클수록 스크롤이 많이 내려가야 시작됨)

data-wow-iteration:애니메이션이 몇번 반복될지 지정

 

 

스크립트 넣어주기

wow = new WOW({ boxClass: 'wow', // 스크롤 이벤트를 등록할 클래스 

animateClass: 'animated', // 기본값 animated => animate.css library 를 적용한다 

offset: 0, // data-wow-offset 의 기본값 0 

mobile: true, // 모바일에서 동작할 것인지 

live: true // 새로추가되는 요소 확인하여 동작 

})

wow.init();

 

애니메이션 참고 사이트는

https://daneden.github.io/animate.css/

 

 

제작 참고사이트

https://gahyun-web-diary.tistory.com/178