jquery.anisview.js

Animate.css + Viewport Checker

Animate.css 기반으로 뷰포트에 엘리먼트가 나타나면 애니메이션이 구현되도록 도와주는 제이쿼리 플러그인입니다.

Installation

Step 1: Jquery Library와 jquery.anisview, 그리고 Animate.css를 첨부하세요.

<!-- jQuery Library -->
<script src="jquery.js"></script>
<!-- jquery.anisview -->
<script src="jquery.anisview.js"></script>
<!-- Animate.css (https://github.com/daneden/animate.css) -->
<link rel="stylesheet" href="animate.css">

Step 2: 타겟 엘리먼트를 준비하세요.

<div class="target">Animation 1</div>
<div class="target">Animation 2</div>
<div class="target">Animation 3</div>
...

Step 3: anisview를 불러오세요.

Load, Scroll, Resize 시 애니메이션을 구현하고 싶을 때

$(function() {
	$(window).on('load scroll resize', function() {
		$('.target').anisview();
	});
});

'slideInLeft' 애니메이션을 구현하고 싶을 때

$(function() {
	$(window).on('load scroll resize', function() {
		$('.target').anisview({
			animation: 'slideInLeft'
		});
	});
});

스크롤을 올리고 내릴 때마다 애니메이션을 구현하고 싶을 때

$(function() {
	$(window).on('load scroll resize', function() {
		$('.target').anisview({
			direction: 'both'
		});
	});
});

스크롤 시 한 번만 애니메이션을 구현하고 싶을 때

$(function() {
	$(window).on('load scroll resize', function() {
		$('.target').anisview({
			repeat: false
		});
	});
});

스크롤 시 애니메이션을 지연시키고 싶을 때

$(function() {
	$(window).on('load scroll resize', function() {
		$('.target').anisview({
			delay: 'delay-2s'
		});
	});
});

스크롤 시 애니메이션의 스피드를 더 빠르게 하고 싶을 때

$(function() {
	$(window).on('load scroll resize', function() {
		$('.target').anisview({
			speed: 'faster'
		});
	});
});

여러 개의 타겟에 애니메이션을 구현하고 싶을 때

$(function() {
	$(window).on('load scroll resize', function() {
		$('.target1').anisview({animation:'slideInLeft'});
		$('.target2').anisview({animation:'bounce'});
		$('.target3').anisview({animation:'zoomInLeft'});
	});
});

Options

animation

Animate.css https://github.com/daneden/animate.css 모든 클래스명 그대로 사용

DEFAULT: 'fadeInLeft'
OPTIONS: 'fadeInLeft', 'slideInUp', 'flipInX', 'jello', ...

direction

스크롤을 내릴 때만, 올릴 때만, 올리고 내릴 때만 애니메이션이 일어나게 할지 선택
('up' : 스크롤이 웹페이지 최하단에 닿았을 때 발생)

DEFAULT: 'down'
OPTIONS: 'down', 'up', 'both'

repeat

스크롤을 내리거나 올릴 때마다 반복적으로 애니메이션이 일어나게 할지 선택

DEFAULT: true
OPTIONS: true, false

delay

애니메이션 지연 시간 선택(Animate.css delay 옵션과 동일하게 사용)

DEFAULT: null
OPTIONS: delay-2s, delay-3s, delay-4s, delay-5s

speed

애니메이션 스피드 선택(Animate.css speed 옵션과 동일하게 사용)

DEFAULT: null
OPTIONS: slow, slower, fast, faster