Javascript & JQuery & CSS

동적인 애니메이션을 만들기 위해서는 CSS3를 이용을 해야한다.
CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜준다.
간단히 애니메이션에 대해서 알아보도록 하자.


1. 애니메이션 속성

animation-delay: 엘리먼트가 로드되고 나서 언제 애니메이션 시작될지 지정한다.
animation-direction: 애니메이션 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정한다.
animation-duration: 한 사이클의 애니메이션이 얼마에 걸쳐 일어날지 지정한다.
animation-ieration-count: 애니메이션이 몇 번 반복될지 지정한다. infinite로 지정하면 무한반복이다.
animation-name: @keyframes 애니메이션의 이름을 지정한다.
animation-play-state: 애니메이션의 실행 여부 또는 일시 중지 여부를 지정한다.
animation-fill-mode: 애니메이션의 속도 곡선을 지정한다.


Scrollorama와 같은 다른 JavaScript 시차 플러그인보다 작습니다 (환상적인 일을하지만 단순한 요구에 너무 무거울 수 있음)
간단히 설치하고 animate.css와 함께 사용하므로 설정이 매우 빠르다.
빠른 실행이 가능하고 코드가 가볍다.
설정을 변경할 수 있다.

2. 다운 및 설정하기
 

<link rel="stylesheet" href="css/animate.css" />

   (3) wow.js 연결 및 실행하기

<script src="js/wow.min.js"></script>
<script>
	new WOW().init();
</script>

2. wow.js 옵션

data-wow-duration: 애니메이션 기간을 변경
data-wow-delay: 애니메이션 시작 전에 지연시간 변경
data-wow-offset: 애니메이션 시작 거리 (브라우저 하단과 관련됨)
data-wow-iteration: 애니메이션이 반복되는 횟수

wow.js 예제

<div id="mainSlogan">
<p class="wow animated fadeInUp" data-wow-duration="2s" data-wow-delay="0s"><img src="img_slogan01.png" /></p>
<p class="wow animated fadeInUp" data-wow-duration="2s" data-wow-delay="1.5s"><img src="img_slogan02.png" /></p>
<p class="wow animated fadeInUp" data-wow-duration="2s" data-wow-delay="3s">
  최고의 자부심과 큰 감동을 느낄 수 있는 공간창출로<br />
  아무도 흉내 낼 수 없는 디자인을 선사해드립니다.</p>
</div>

[테스트 페이지 보기]

애니메이션 효과는 아래 주소에서 확인해 볼 수 있습니다.
https://daneden.github.io/animate.css/