Animação com javascript puro em 45 linhas

Alguns dias atrás tirei 15 minutos de meu trabalho para fazer algo com um efeito de uma bola quicando em uma area definida no browser usando javascript ( não irei contar a verdadeira história que me levou a fazer isso, pois é algo longo…. 😛 ),  e como vi que ficou legal, achei bacana mostrar isso para vocês.

Espero que esse exemplo ajude alguém a ter novas ideias!  😉

Antes de colar o fonte + o link demo, quero dizer que somente testei esse efeito no Firefox e Chrome se alguém puder me da um feedback, ficarei feliz!  🙂

FONTE:

<script language=javascript>
var LIMITE_Y = 200,LIMITE_X = 200,LIMITE_BARRA = 0,DELAY = 10, VELOCIDADE = 2, X = 0, Y = 0;
var PAUSE = false;
var SENTIDO_Y = “D”, SENTIDO_X= “B”;
window.onload = function(){
var BOX = document.getElementById(“box”);
var BARRA = document.getElementById(“bloco”);
var AREA = document.getElementById(“area”);
BARRA.style.left = 75;
BARRA.style.top = 100;
BOX.style.left = X;
BOX.style.top = Y;
var LIMITE_BARRA_X = parseInt(BARRA.style.top.replace(“px”,””))-parseInt(BOX.offsetHeight)-parseInt(BARRA.offsetWidth);
var LIMITE_BARRA_Y = parseInt(BARRA.style.left.replace(“px”,””))+parseInt(BOX.offsetWidth);
window.setInterval(function() {
if(PAUSE) {
if (Y >= LIMITE_Y)SENTIDO_Y = “E”;
if (Y <= 0)SENTIDO_Y = “D”;
Y = (SENTIDO_Y == “D”) ? (Y+VELOCIDADE): (Y-VELOCIDADE);
if (X >= LIMITE_X)SENTIDO_X = “C”;
if (X <= 0)SENTIDO_X = “B”;
X = (SENTIDO_X == “B”) ? (X+VELOCIDADE) : (X-VELOCIDADE);
if((X == LIMITE_BARRA_X  && Y <= LIMITE_BARRA_Y)) SENTIDO_X = “C”;
if(X <= (LIMITE_BARRA_X+parseInt(BARRA.offsetWidth)+parseInt(BARRA.offsetHeight)) && Y <= parseInt(BOX.offsetHeight+BARRA.offsetHeight)) {
if(X == (LIMITE_BARRA_X+BARRA.offsetWidth+BARRA.offsetHeight))SENTIDO_Y = “E”;
else if (X > LIMITE_BARRA_X &&  X <= (parseInt(BOX.offsetHeight)+LIMITE_BARRA_X)){
SENTIDO_X = “B”;
SENTIDO_Y = “D”;
}
AREA.style.backgroundColor= (AREA.style.backgroundColor == ‘green’ ? ‘white’ : ‘green’);
}
BOX.style.left = Y;
BOX.style.top = X;
}
},DELAY);
}
</script>

 

var LIMITE_Y = 200,LIMITE_X = 200,LIMITE_BARRA = 0,DELAY = 10, VELOCIDADE = 2, X = 0, Y = 0;
var PAUSE = false;
var SENTIDO_Y = "D", SENTIDO_X= "B";
window.onload = function(){
var BOX = document.getElementById("box");
var BARRA = document.getElementById("bloco");
var AREA = document.getElementById("area");
BARRA.style.left = 75;
BARRA.style.top = 100;
BOX.style.left = X;
BOX.style.top = Y;
var LIMITE_BARRA_X = parseInt(BARRA.style.top.replace("px",""))-parseInt(BOX.offsetHeight)-parseInt(BARRA.offsetWidth);
var LIMITE_BARRA_Y = parseInt(BARRA.style.left.replace("px",""))+parseInt(BOX.offsetWidth);
window.setInterval(function() {
if(PAUSE) {
if (Y >= LIMITE_Y) SENTIDO_Y = "E";
if (Y <= 0) SENTIDO_Y = "D"; Y = (SENTIDO_Y == "D") ? (Y+VELOCIDADE): (Y-VELOCIDADE); if (X >= LIMITE_X) SENTIDO_X = "C";
if (X <= 0) SENTIDO_X = "B";
X = (SENTIDO_X == "B") ? (X+VELOCIDADE) : (X-VELOCIDADE);
if((X == LIMITE_BARRA_X && Y <= LIMITE_BARRA_Y)) SENTIDO_X = "C";
if(X <= (LIMITE_BARRA_X+parseInt(BARRA.offsetWidth)+parseInt(BARRA.offsetHeight)) && Y <= parseInt(BOX.offsetHeight+BARRA.offsetHeight)) { if(X == (LIMITE_BARRA_X+BARRA.offsetWidth+BARRA.offsetHeight))SENTIDO_Y = "E"; else if (X > LIMITE_BARRA_X && X <= (parseInt(BOX.offsetHeight)+LIMITE_BARRA_X)){
SENTIDO_X = "B";
SENTIDO_Y = "D";
}
AREA.style.backgroundColor= (AREA.style.backgroundColor == 'green' ? 'white' : 'green');
}
BOX.style.left = Y;
BOX.style.top = X;
}
},DELAY);
}

DEMO :   http://aspx.xmasters.com.br/bolinha/

Anúncios

Systems Analyst / .Net Developer

Marcado com: , , , , , , , , , , ,
Publicado em Artigos
3 comentários em “Animação com javascript puro em 45 linhas
  1. lucasfsmartins disse:

    Muito legal cara… JavaScript é uma coisa que me deixa cada dia mais surpreendido… veja em meu blog este post sobre javascript http://ainternetenossa.wordpress.com/2009/09/24/voce-gosta-de-javascript-entao-veja-isso/, você irá gostar…

    Abraços!

  2. Paulino disse:

    funciona. porém da diferença de css no ie6, mas o script ta blz…
    abs..

  3. Francke Peixoto disse:

    IE6 está obsoleto! 😉

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: