wow.js는 스크롤 시 페이지들의 요소들이 하나씩 애니메이션 효과로 나타날 수 있도록 해주는 라이브러리로 각 요소들마다 옵션값을 넣어 개별적으로 애니메이션 설정할 수 있어서 사용하기 편하다.
설치방법
1. 공식 사이트 Github에서 파일 다운로드
2. WOW-master/css/libs/animate.css 파일을 css폴더나 적당한 폴더에 업로드 원하는 페이지에 로드
<link rel="stylesheet" href="css/animate.css">
3. WOW-master/dist/wow.min.js 파일을 js폴더나 적당한 폴더에 업로드 후 원하는 페이지에 로드, 스크립트 추가
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
스크립트는 아래처럼 설정도 가능하다.
var wow = new WOW(
{
boxClass: 'wow', // animated element css class (default is wow)
animateClass: 'animated', // animation css class (default is animated)
offset: 0, // distance to the element when triggering the animation (default is 0)
mobile: true, // trigger animations on mobile devices (default is true)
live: true, // act on asynchronously loaded content (default is true)
callback: function(box) {
// the callback is fired every time an animation is started
// the argument that is passed in is the DOM node being animated
},
scrollContainer: null, // optional scroll container selector, otherwise use window,
resetAnimation: true, // reset animation on end (default is true)
}
);
wow.init();
4. 애니메이션 효과를 원하는 요소 Class명에 wow 와 원하는 애니메이션 효과 스타일 추가(fadeIn, fadeOut, bounceInUp, slideInLeft) 지속시간이나 지연시간 등 원하는대로 조정 가능하다.
<div class="wow fadeIn" data-wow-duration="0.5s" data-wow-delay="0.3s">
Contents
</div>
[애니메이션 효과]
* bounce
* flash
* pulse
* bounceIn / bounceOut / bounceInLeft / bounceInRight / bounceInUp
* fadeIn / fadeInDown / fadeInLeft / fadeInRight / fadeInUp 등
더 많은 효과는 https://animate.style/ 에서 확인 가능.
[wow 속성]
* data-wow-duration : 애니메이션 지속 시간
* data-wow-delay : 애니메이션이 실행되기까지의 지연 시간
* data-wow-offset : 요소가 어느정도 올라왔을때 애니메이션이 실행 될지 설정
* data-wow-iteration : 애니메이션 반복 횟수
'개발 > js·jquery' 카테고리의 다른 글
bxslider 현재 슬라이드에 클래스 추가하기 (0) | 2024.11.26 |
---|---|
[에러] Uncaught TypeError: Cannot read properties of undefined (reading 'split') (0) | 2024.08.30 |
[CSS/jQuery] 크기가 다른 Grid item 자동 정렬 하기 (0) | 2024.08.15 |
[jQuery] input 엔터 시 특정 함수 실행 (0) | 2024.08.12 |
자바스크립트 예약어 (2) | 2024.02.27 |
[jQuery] 새로고침 시 스크롤 위치 맨위로 리셋해주는 스크립트 (4) | 2023.11.19 |
[jQuery] 스크롤 이벤트 / 스크롤 특정 위치에 따라 효과 변경 (4) | 2023.11.19 |
[jQuery] Swiper 슬라이더 버튼 컬러 변경 (Navigation, Pagination) (4) | 2023.11.06 |