JavaScriptでロゴムービー

JavaScriptでロゴムービーを作ってみた。

var twoPai = Math.PI * 2;

var timer, count = 0, max = 40, half = max / 2;

var Circle = new Array(2), Char = new Array(8), Door;

var baseX = 180, baseY = 140;

var waveHeight = 100, waveWidth = 128;

var charX = baseX - waveWidth - 8;

var step = waveWidth * 2 / half / (8-1);



function startMovie(){

if(document.getElementById){

for(var i = 0; i < 2; i++){

Circle[i] = document.getElementById("circle" + i);

}

for(i = 0; i < 8; i++){

Char[i] = document.getElementById("char" + i);

}

Door = document.getElementById("door");

Door.style.visibility = "hidden";

timer = setInterval("movie()", 25);

}else{

alert("このページはDOM準拠のブラウザでご覧下さい。");

}

}



function movie(){

var i;

if(count <= max){

Circle[0].style.top = baseY +

waveHeight * (Math.sin(twoPai/max*count))+"px";

Circle[0].style.left = baseX +

waveWidth/max*count + "px";

Circle[1].style.top = baseY -

waveHeight * (Math.sin(twoPai/max*count))+"px";

Circle[1].style.left = baseX -

waveWidth/max*count + "px";



if(count == half){

for(i = 0; i < 8; i++){

Char[i].style.top = (baseY + 5) + "px";

Char[i].style.visibility = "visible";

}

}

if(count >= half){

for(i=0; i<8; i++){

Char[i].style.left = charX +

(step * i) * (count - half) + "px";

}

}

count++;

}else{

clearInterval(timer);

Char[0].style.color = "#FF0000";

Char[7].style.color = "#FF0000";

Door.style.visibility = "visible";

}

}



function stopTimer(){

if(window.clearInterval) { clearInterval(timer); }

}