2016-11-30

참고 http://animateyourhtml5.appspot.com/pres/

위 자료를 참고로 해당 문서에 있는 효과들을 하나씩 아래에 구현해 볼 예정이다.
해당 기능들은 모바일에서는 레이아웃이 깨지거나, 제대로 안보일 수 있고, IE에서는 제대로 동작하지 않는 것이 많을 것이다.

<script>
function move(id)
{
	var nod = document.getElementById(id);
	if (nod != null)
	{
		if (!nod.classList.contains('begin') && !nod.classList.contains('end'))
		{
			nod.classList.add('end');
		}
		else
		{
			nod.classList.toggle('begin');
			nod.classList.toggle('end');
		}
	}
}
window.addEventListener('scroll', function(e) {
	if(window.scrollY >= 100 && window.scrollY <= 140 )
	{
		move('im4');
	}
	console.log(window.scrollY);
});

</script>
<style>
#im3 { position:absolute; transition: 0.5s;}
#im3.begin { left: 0px; top:1050px; transform: rotate(0deg);}
#im3.end   { left: 300px; top:1200px; transform: rotate(360deg);}
#im4 { position:static; transition: 1s;}
#im4.begin { transform: rotate(0deg);}
#im4.end   { transform: rotate(900deg);}
</style>

<div class='row' style="height:220px;">
<img id="im3" class="begin" src="/post_inc/html5_animate/test_img2.png" onclick="move('im3')"/>
</div>
<div class='row'>
<img id="im4" class="begin" src="/post_inc/html5_animate/test_img2.png" onclick="move('im4')"/>
</div>

<style>
img#imB { 
	position: absolute;
	animation: anim2 ease-in-out 3s infinite alternate;
	animation-delay:0s;
}
img#imB.begin { position: absolute; animation: 0s;}
@keyframes anim2
{
	from {left: 0px;   transform: scale(1)   rotate(0deg) }
	50%  {left: 100px; transform: scale(0.2) rotate(10deg) }
	to   {left: 400px; transform: scale(1.8) rotate(-20deg) }
}
</style>
<div class='row' style="height:220px;">
<img class="end" id="imB" src="/post_inc/html5_animate/test_img2.png" onclick="move('imB')"/>
</div>

animation 태그

오브젝트{
	animation: [animation-name] [easing키워드] [animation-duration] [animation-iteration-count] [animation-direction];	
}
@keyframes [animation-name]{
	from {}
	to   {}
}

easing 키워드

• linear : 균일한 속도
• ease-in : 빠르게 시작하여 느리게
• ease-out : 느리게 시작하여 빠르게
• ease-in-out : 차량의 감속 효과

• animation-name : 해당 애니메이션을 지칭할 이름
• animation-delay : 엘리먼트 시작 딜레이
• animation-direction : 애니메이션 종류후 다시 처음, 역방향 설정
  (normal | reverse | alternate | alternate-reverse)
• animation-duration : 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정
• animation-iteration-count : 애니메이션이 몇 번 반복될지 지정
  (infinite | 숫자)
• animation-play-state : 애니메이션을 멈추거나 다시 시작
  (running | paused)
• animation-timing-function : 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정
  (ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps( [, [ start | end ] ]? ) )
• animation-fill-mode : 애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정
  (none | forwards | backwards | both)

<style>
img#imC
{
	animation: demo-rotate ease-in-out 3.57s alternate infinite;
}
img#imC.begin {animation: 0s}
@keyframes demo-rotate
{
	from {transform: rotate(0deg);}
	20% {transform: rotate(0deg);}
	40% {transform: rotate(-1000deg);}
	60% {transform: rotate(0deg);}
	80% {transform: rotate(-700deg);}
	to {transform: rotate(180deg);}
}

img#imD
{
	animation: demo-scale ease-in-out 2.33s  infinite;
}
img#imD.begin {animation: 0s}
@keyframes demo-scale
{
	from {transform: scale(1);}
	10% {transform: scale(1);}
	40% {transform: scale(0.001);}
	70% {transform: scale(1.4);}
	80% {transform: scale(1);}
	to {transform: rotate(1);}
}

img#imE
{
	animation: demo-skew ease-in-out 7s  infinite;
}
img#imE.begin {animation: 0s}
@keyframes demo-skew
{
	from {transform: skew(0deg, 0deg);}
	10% {transform: skew(30deg, 0deg);}
	20% {transform: skew(-40deg, 0deg);}
	30% {transform: skew(0deg, 0deg);}
	40% {transform: skew(0deg, 30deg);}
	50% {transform: skew(0deg, -30deg);}
	60% {transform: skew(40deg, 40deg);}
	70% {transform: skew(-40deg, -40deg);}
	80% {transform: skew(30deg, -30deg);}
	90% {transform: skew(-30deg, 30deg);}
	to {transform: skew(0deg, 0deg);}
}

table#tab1 tr td
{
	padding: 10px;
	width: 33%
}
</style>

<table id="tab1" width="100%" class="table-noborders"><tr>
<td style="text-align: left;  "><img id="imC" height="200px" class="end" onclick="move('imC');" src="/post_inc/html5_animate/test_img3.png" /></td>
<td style="text-align: center;"><img id="imD" height="200px" class="end" onclick="move('imD');" src="/post_inc/html5_animate/test_img7.png" /></td>
<td style="text-align: right; "><img id="imE" height="200px" class="end" onclick="move('imE');" src="/post_inc/html5_animate/test_img5.png" /></td>
</tr>
</table>

• rotate(0deg) : 회전 효과
• scale(1.3) : 확대/축소 효과
• skew(±Xdeg, ±Ydeg) : 기울임 효과
• translate(±Xpx, ±Ypx) : 위치 변경

http://b1ix.net/283 에서 계속....