Greg Murray씨가 HTML5 Fish Tank라는 재밌는 예제 프로그램 베타판을 작성했습니다. 이 프로그램은 사용자가 자신만의 물고기를 만들고, 만든 물고기를 어항에 놓을 수 있는 프로그램입니다.
또한, 이 프로그램에는 저수준(low level)의 Canvas와 CSS3 전이/변형 효과가 사용되었습니다.
[code:js]
<div id="1275463173677" class="fish" style="-webkit-transition-duration: 3369ms; -webkit-transform-origin-x: 508px; -webkit-transform-origin-y: 485px; -webkit-transform: rotateY(0deg) translate(508px, 485px); ">
<div style="position: absolute; margin-top: 27px; margin-left: 70px; "><canvas width="30" height="44" style="width: 30px; height: 66px; "></canvas></div>
<div style="position: absolute; margin-top: 25px; margin-left: 2px; "><canvas width="71" height="71" style="width: 71.5px; height: 71.5px; "></canvas></div>
<div style="position: absolute; margin-top: 40px; margin-left: 19px; "><canvas width="20" height="20" style="width: 20px; height: 20px; "></canvas></div>
<div style="position: absolute; margin-top: 59px; margin-left: 4px; "><canvas width="44" height="44" style="width: 44px; height: 44px; "></canvas></div>
<div style="position: absolute; margin-top: 45px; margin-left: 40px; "><canvas width="20" height="20" style="width: 20px; height: 20px; "></canvas></div>
<div style="position: absolute; margin-top: 19px; margin-left: 26px; "><canvas width="33" height="33" style="width: 33px; height: 33px; "></canvas></div>
<div style="position: absolute; margin-top: 81px; margin-left: 40px; "><canvas width="44" height="44" style="width: 44px; height: 44px; "></canvas></div>
</div>
<div id="1275463173677" class="fish" style="-webkit-transition-duration: 3369ms; -webkit-transform-origin-x: 508px; -webkit-transform-origin-y: 485px; -webkit-transform: rotateY(0deg) translate(508px, 485px); ">
<div style="position: absolute; margin-top: 27px; margin-left: 70px; "><canvas width="30" height="44" style="width: 30px; height: 66px; "></canvas></div>
<div style="position: absolute; margin-top: 25px; margin-left: 2px; "><canvas width="71" height="71" style="width: 71.5px; height: 71.5px; "></canvas></div>
<div style="position: absolute; margin-top: 40px; margin-left: 19px; "><canvas width="20" height="20" style="width: 20px; height: 20px; "></canvas></div>
<div style="position: absolute; margin-top: 59px; margin-left: 4px; "><canvas width="44" height="44" style="width: 44px; height: 44px; "></canvas></div>
<div style="position: absolute; margin-top: 45px; margin-left: 40px; "><canvas width="20" height="20" style="width: 20px; height: 20px; "></canvas></div>
<div style="position: absolute; margin-top: 19px; margin-left: 26px; "><canvas width="33" height="33" style="width: 33px; height: 33px; "></canvas></div>
<div style="position: absolute; margin-top: 81px; margin-left: 40px; "><canvas width="44" height="44" style="width: 44px; height: 44px; "></canvas></div>
</div>
물고기의 애니메이션은 다음과 같이 작성되었습니다.
[code:js]
function goFish( target) {
if ( !target.lastPoint) {
target.lastPoint = target.currentPoint;
}
if ( target.timer ) {
clearTimeout( target.timer );
}
target.currentPoint = getRandomPoint();
target.style.webkitTransitionDuration = target.currentPoint.d;
target.style.webkitTransformOrigin = target.currentPoint .x + " " + target.currentPoint.y;
var _scale = "";
if ( target.lastPoint.x> target.currentPoint.x ) {
_scale = "rotateY(-180deg)";
} else {
_scale = "rotateY(0deg)";
}
target.style.webkitTransform = _scale + " translate(" + target.currentPoint.x + "px, " + target.currentPoint.y + "px)";
target.lastPoint = target.currentPoint;
target.timer = setTimeout( function () {
console.log( "saved the day" );
goFish( target);
}, ( target.currentPoint.d + 2000 ) );
}
'[IT] Web Tech' 카테고리의 다른 글
| CSS calc() (2) | 2010.06.16 |
|---|---|
| IE6를 퇴출시키는 치사한 방법 - amelie() (0) | 2010.06.07 |
| 배열과 객체에 SQL 질의를 하는 두 가지 방법 (0) | 2010.06.05 |
| ShowSlow : 페이지 속도를 모니터링하는 도구 (0) | 2010.06.04 |
| CSS3와 Canvas로 어항만들기 (2) | 2010.06.03 |
| 움직이는 둥근 모서리 (0) | 2010.05.31 |
| 이제 인터넷 속도는 중요하지 않다. (0) | 2010.05.28 |
| WebM : 구글이 제공하는 로열티 없는 비디오 코덱 (0) | 2010.05.27 |
| CSS를 완전히 초기화 하는 방법 (0) | 2010.05.26 |