Tabla de contenido
Este post lo dejo aquí colgado por que me parece un buen ejemplo que puede valer a mucha gente para empezar a programar un poco con JavaScript utilizando al mismo tiempo CSS3. Se trata de una manera «relativamente» sencilla de mover un objeto por pantalla utilizando estos dos lenguajes.
Para esto utilizaremos el método getElementById de JavaScript, @-webkit-keyframes y @-moz-keyframes de CSS3. Con esto conseguiremos el típico efecto de los salvapantalla de ordenador en el que podemos ver un elemento botando de un lado a otro por la pantalla.
Si quieres ver el resultado final del ejemplo, puedes hacerlo en el siguiente enlace. El ejemplo solo consta de un único archivo, pero lo suyo llegado el caso sería dividirlos según los diferentes lenguajes.
Mover un objeto por pantalla con JavaScript
Como digo, el código que se necesita irá todo dentro de un archivos index.html.
CSS3
/* Estilos para la caja y para el elemento a mover */ #imagen{ /*Es importantisimo asignarle a la imagen una posición relativa para que pueda moverse siguiendo el flujo natural del HTML es decir dentro de la caja. */ width:150px; position:relative; display:block; } #lienzo{ border:1px solid gray; box-shadow:0px 0px 20px gray inset; width:100%; height:750px; border-radius:20px; overflow: hidden; } /*Animaciones en css*/ .gira{ -moz-animation:rotar 500ms infinite linear; -webkit-animation:rotar 500ms infinite linear; } @-webkit-keyframes rotar{ from{-webkit-transform:rotate(0deg);} to{-webkit-transform:rotate(360deg);} } @-moz-keyframes rotar{ from{-moz-transform:rotate(0deg);} to{-moz-transform:rotate(360deg);} }
JavaScript
//Definimos e iniciamos las variables necesarias var y=0; var x=0; var controlY=1; var controlX=1; var velocidad=1; // Cada 5 mili-segundos se va a ejecutar la función mover que comprueba // las colisiones de la pelota var intervalo=setInterval("mover()",5); //la función mover, que hace el idem con el objeto function mover(){ //Eje de las X if(controlX==1){ x+=velocidad; }else{ x-=velocidad; } if(x<=0){ controlX=1; x=0; }else if(x>=document.getElementById("lienzo").offsetWidth-150){ // Esto significa que si es mayor o igual a el ancho que tiene el lienzo menos el tamaño de la imagen se le da un nuevo valor a x controlX=0; x=document.getElementById("lienzo").offsetWidth-150; } //Eje de las Y if(controlY==1){ y+=velocidad; }else{ y-=velocidad; } if(y<=0){ controlY=1; y=0; }else if(y>=document.getElementById("lienzo").offsetHeight-150){ // Esto significa que si es mayor o igual a la altura que tiene el lienzo menos el tamaño de la imagen se le dará un nuevo valor a y controlY=0; y=document.getElementById("lienzo").offsetHeight-150; } //movemos la imagen en el eje x e y asignando un valor en px document.getElementById("imagen").style.left=String(x)+"px"; document.getElementById("imagen").style.top=String(y)+"px"; } //función que llama a la animación css para girar el objeto function girar(){ document.getElementById("imagen").className="gira"; }
HTML
<div id="lienzo"> <img src="planeta.png" id="imagen" alt="eclipse"/> </div> <input type="button" value="Rotar" id="rotar" onclick="girar();"/>
Evidentemente todo este código ha de ir envuelto entre las correspondientes etiquetas para que funcione correctamente. En su día me vi obligado a quitárselas, aun que a día de hoy no recuerdo por qué lo hice. Pero bueno, avisado está todo aquel que quiera utilizar el código que en este artículo se muestra.
9 Comentarios
uy, pensé que era un objeto que podría moverse con la cruzeta del teclado, igual está bueno :)
Hola, algo como lo que pides, creo que lo tengo por alguna carpeta. Si lo encuentro lo publicaré también. Salu2.
No sé si algo así se acerca a lo que buscas.
Perdi significativamente mi tiempo
Quizás seas significativamente un poco inútil … no sé que más decirte :)
ja,ja,ja bien dicho, encima que lo publicas, la gente dando por ( | )
Hay gente para todo ;). Salu2.
esto es una mierda
Esto es una mierda … o tú un puto inútil. Yo me inclino más por esta segunda opción, pedazo de subdesarrollado.