티스토리 뷰
jQuery로 Animation을 만드는 방법을 찾는 도중 아주 흥미로운 사이트를 발견했습니다.
호기심에 코드를 분석해보지 않을수가 없군요 ^ㅡ^
원본 사이트 및 출처는 http://robot.anthonycalzadilla.com/ 입니다.
먼저 script.js를 보면 애니메이션 구동에 필요한 자바스크립트 코드를 확인할 수 있습니다.
div 영역을 누르면 작동하게 되어있는데요, 아래 코드를 보시지요.
// script.js
//jQuery Robot v.01 - Original idea, graphics, mark-up, css and clunkified js script
//by: Anthony Calzadilla
//jQuery robot script completely rewritten by the very generous folks at:
//codingcyborg.com// 각각의 css를 초기화 하는 작업을 하네요. ready라는것은 jQuery에서
// 페이지가 로딩되면 바로 초기화를 진행합니다.
$(document).ready(function(){
$('#cloud-01').css({backgroundPosition: '0 -80px'});
$('#cloud-02').css({backgroundPosition: '0 -30px'});
$('#mountains-03').css({backgroundPosition: '0 50px'});
$('#trees-04').css({backgroundPosition: '0 50px'});
$('#ground').css({backgroundPosition: 'left bottom'});
$('#branding').css({backgroundPosition: 'center 0'});
$('#content').css({backgroundPosition: 'center 0'});
$('#sec-content').css({backgroundPosition: 'center 0'});
$('#footer').css({backgroundPosition: 'center 0'});
$('#wrapper').css({overflow: "hidden"});
// 여기 시작부분이네요. klicker 아이디를 가진 div를 클릭할때 animate를 실행하게 되있네요.
// 각각의 cloude-01, 02, mountains-03, ground div의 배경화면을 일정시간마다 이동!
$('#klicker').click(function(){
$('#cloud-01').animate({backgroundPosition: '(-500px -80px)'}, 20000);
$('#cloud-02').animate({backgroundPosition: '(-625px -30px)'}, 20000);
$('#mountains-03').animate({backgroundPosition: '(-2500px 50px)'}, 20000);
$('#ground').animate({backgroundPosition: '(-5000px bottom)'}, 20000);
// 이 startHim의 메서드는 로봇을 위아래로 덩실덩실 움직이는 역할을 합니다.
startHim();
// 요 부분은 처음 실행했을때 로봇을 중간에 배치하는거죠. 2초 동안 걸쳐서요.
$("#full-robot").animate({left:"50%",marginLeft:"-150px"}, 2000);
// 이건 15초후에 leaveScreen()을 호출하게 됩니다. setTimeout이 뭔지는 아시죠!?
setTimeout("leaveScreen()",15000);
});
});
var num = 1;
function startHim(){
// startHim() 부분입니다. num이 뭔지는 아직 잘모르겠습니다. 더 살표보도록 하죠.
num++;
// sec-content라는 이름을 가진 녀석을 위아래로 5씩 움직이네요.
$("#sec-content").animate({top:"-=5px"},150).animate({top:"+=5px"},150);
// num이 여기서도 써먹는군요. content와 banding div를 위아래로 num만큼 움직이네요.
$("#content,#branding").animate({
top:"-="+num+"px"},150).animate({top:"+="+num+"px"},150);
if(num<4){
// num이 1~3까지, 즉 3번은 startHim을 재귀호출 합니다.
setTimeout("startHim()",300);
} else {
// 넘어가면 bounceHim()을 호출하네요.
setTimeout("bounceHim()",300);
}
// startHim은 로봇의 몸을 위아래로 흔드는데, 왜 bounceHim과 두개로 나눴을까요.
// 사실 안나누고 해도 상관은 없습니다만;; 위에서 num값을 고정 상수로 바꿔준다면...
// 여기서는 역동적인 움직임을 표현하기 위해 두가지로 나누었더군요.
}
// 여기는 따로 설명하지 않겠습니다.
function bounceHim(){
$("#sec-content,#branding").animate({top:"-=4px"},150).animate({top:"+=4px"},150);
$("#content").animate({top:"-=8px"},150).animate({top:"+=8px"},150);
setTimeout("bounceHim()",300);
}
// 로봇아 안녕~!!!
function leaveScreen(){
$("#full-robot").animate({left:"100%",marginLeft:"0px"}, 2000);
}
<!-- animation.html-->
<body id="home">
<div id="intro">
<h1>jQuery Robot v.01</h1>
<p>Idea, graphics, mark-up, css and clunkified js script by:
<a href="http://anthonycalzadilla.com"
title="Anthony Calzadilla">Anthony Calzadilla</a>
</div>
// script에서 이미 선언되었기 때문에 klicker div의 영역을 누르면 스크립트가 작동합니다.
<div id="klicker" >
<strong style="font-size:2em; color:#a80303;">
Click Here, Once Everything Loads up, and stuff... ok?</strong></div>
<div id="wrapper">
<div id="cloud-01">
<div id="cloud-02">
<div id="mountains-03">
<div id="trees-04">
<div id="ground">
<div id="full-robot">
<div id="branding"><h1>Head.</h1></div>
<div id="content"><p>Upper body.</p></div>
<div id="sec-content"><p>Lower body.</p></div>
<div id="footer"><p>Feet.</p></div>
</div>
</div><!-- end ground -->
</div><!-- end trees-04 -->
</div><!-- end mountain-03 -->
</div><!-- end cloud-02 -->
</div><!-- end cloud-01 -->
</div><!-- end wrapper --></body>
사실 jQuery의 animate의 속성중에는 backgroundPosition라는 것은 존재하지 않습니다.
이 속성은 이 스크립트의 제작자가 만든 jQuery의 확장 스크립트입니다.
/**
* @author Alexander Farkas
* v. 1.02
*/
(function($) {
$.extend($.fx.step,{
backgroundPosition: function(fx) {
if (fx.state === 0 && typeof fx.end == 'string') {
var start = $.curCSS(fx.elem,'backgroundPosition');
start = toArray(start);
fx.start = [start[0],start[2]];
var end = toArray(fx.end);
fx.end = [end[0],end[2]];
fx.unit = [end[1],end[3]];
}
var nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
function toArray(strg){
strg = strg.replace(/left|top/g,'0px');
strg = strg.replace(/right|bottom/g,'100%');
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
}
}
});
})(jQuery);
이상으로 이번 포스트를 마치겠습니다~!
도움이 되셨다면 아래 추천 꾸욱!