Pelota que rebota con Javascript

Vamos a ver como se hace el famoso efecto de los salvapantallas, el efecto de pelota que rebota con Javascript, el elemento se moverá por los ejes X, Y y Z.
Vamos a conseguir esto:

Para comprender el ejemplo debes saber HTML, algo de CSS y programación básica con JS

<!DOCTYPE HTML>
<html lang="es">
<head>
	<meta charset="utf-8"/>
	<title>Mover bola en el eje Z con dentro de una caja JS</title>
	<style type="text/css">
	/*
		Definimos los estilos de la pelota y
		de la caja que la contiene
	*/

		#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. Si le ponemos posición absoluta la bola
		  se saldrá del div, y si utilizas posición fixed la bola utilizará
		  toda la ventana del navegador para dar vueltas, por defecto la posición
		  de los elementos es estática lo que quiere decir que no pueden posicionarse
		  por encima de otros elementos sino que van uno detrás de otro.
		*/
			position:relative;
			display:block;
			width:200px;
		}

		#lienzo{
			width:100%;
			height:750px;
			border:1px solid gray;
			box-shadow:0px 0px 20px gray inset;
			border-radius:20px;
			overflow: hidden;
		}
       
 /*Animaciones CSS*/
        .gira{
        	-moz-animation:rotar 700ms infinite linear;
        	-webkit-animation:rotar 700ms infinite linear;
        }
        @-moz-keyframes rotar{
        	from{-moz-transform:rotate(0deg);}
        	to{-moz-transform:rotate(360deg);}
        }
        @-webkit-keyframes rotar{
        	from{-webkit-transform:rotate(0deg);}
        	to{-webkit-transform:rotate(360deg);}
        }

	</style>
	<script type="text/javascript">

		//Definimos las variables:
 		var y=0;           
 		var x=0;
 		var controlY=1;	 
 		var controlX=1;  
 		var velocidad=1;

		// Cada 6 mili-segundos se va a ejecutar la función mover que comprueba
                // las colisiones de la pelota
 		var intervalo=setInterval("mover()",6);

 		function mover(){
 			//Eje Y
 			if(controlY==1){ 
 				y+=velocidad;
 			}else{         
 				y-=velocidad;
 			}
 			if(y<=0){
 				controlY=1;
 				y=0;
 			}else if(y>=document.getElementById("lienzo").offsetHeight-200){ 
// Esto significa si y es mayor o igual a la altura que tiene el lienzo menos el tamaño de la imagen

                                controlY=0;
 				y=document.getElementById("lienzo").offsetHeight-200;
 			}

 			//Eje X
 			if(controlX==1){ 
 				x+=velocidad;
 			}else{         
 				x-=velocidad;
 			}
 			if(x<=0){
 				controlX=1;
 				x=0;
 			}else if(x>=document.getElementById("lienzo").offsetWidth-200){
 				controlX=0;
 				x=document.getElementById("lienzo").offsetWidth-200;
 			}
 			document.getElementById("imagen").style.left=String(x)+"px";
 			document.getElementById("imagen").style.top=String(y)+"px";
 		}

 		function girar(){
 			document.getElementById("imagen").className="gira";
 		}
	</script>
</head>
<body>
<h2>Mover elemento en Eje Z</h2>
<div id="lienzo">
        <img src="eclipse.png" id="imagen" alt="eclipse"/></div>
        <input type="button" value="Rotar" id="rotar" onclick="girar();"/>
</body>
</html>

Si encuentras un ejemplo mas sencillo de como hacer esto, te devuelvo el dinero 😉

Más información:
Diferencia entre position static, relative y absolute de CSS

Victor

Autor: Victor

Desarrollador web - Formador online - Blogger

Compartir este post

1 Comentario

  1. Lo intento hacer con jquery pero tengo un problema y es que la función no se me repite y se mueve solamente una vez. Este es el código jQuery:

    setInterval(“pelota5()”,6);
    function pelota5(){

    var mover = $(“.pelota5”);
    var contenedor = $(“.contenedor5”);
    var x=0;
    var y=0;
    var controlY = 5;
    var controlX = 5;
    var velocidad = 5;
    if (controlY == 5){
    y+=velocidad;
    }

    else {
    y-=velocidad;
    }
    if (y = contenedor.offsetHeight-25){
    controlY=0;
    y=contenedor.offsetHeight-25;
    }
    if(controlX == 5){
    x += velocidad;
    }
    else{
    x-=velocidad;
    }
    if (x= contenedor.offsetWidth-25){
    controlX=0;
    x=contenedor.offsetWidth-25;
    }

    mover.css(“left”, + x);
    mover.css(“top”, + y);
    }

    y aqui el HTML por si acaso:

    tambien el css por si quieres ver las propiedades:

    .pelota5{
    position:absolute;
    width:20px;
    height:20px;
    border:1px solid red;
    border-radius:10px;
    background-color:red;
    max-width:500px;
    }

    .contenedor5{
    position:absolute;
    top:1100px;
    border:1px solid black;
    width:500px;
    height:500px;
    }

    Gracias y un Saludo

    Responder

Poner un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *