Movimiento circular con Javascript

Movimiento circular con Javascript / Mariano J. Muzas HTML5, CSS3, PHP, Mysql, bbdd, javascript, JQuery, JQuerymobile, Bootstrap, Material Design, WordPress, Newsletter, Api de Facebook, Api de twitter, PrestaShop.

Movimiento circular con Javascript

Para secciones que permiten una mayor creatividad, existen muchos ejemplos para hacer destacar sus elementos, uno de ellos es el movimiento generado con JS.

Con las coordenadas, podemos mover un div por la sección, o en este caso, con un movimiento circular infinito. Con este código Javascript lo conseguimos.

	onload=function(){
		var	o=document.getElementById ("bck404"),
		r=15,
		i=0,
		x,
		y,
		posirx=14,
		posiry=2;
		setInterval(function(){
		i+=.01;
		x=posirx+Math.cos(i)*r;
		y=posiry+Math.sin(i)*r;
		o.style.left=x+"px";
		o.style.top=y+"px";
		},5);
	}

LLamámos al div por su id "bck404" en este caso es una imagen de fondo, un fantasma, dandole una altura y una posición. Llamámos al movimiento mediante las coordenadas X e Y.

Con esto logramos de modo sencillo el efecto de movimiento circular infinito, que siempre se puede modificar para que realice otro tipo de acciones.

Otro factor a tener en cuenta, es la sombra, dentro del div con la class "shadow". Para que el efecto de flotabilidad sea mayor.

CSS

	.shadow {
		transform-origin: center center;
		margin: 130% auto;
		width: 45%; 
		height: 50px;
		border-radius: 50%;
		background: rgba(140,140,140,.6); 
		-webkit-transform: scaleY(0.4);
		-moz-transform: scaleY(0.4);
		-o-transform: scaleY(0.4);
		-ms-transform: scaleY(0.4);
		transform: scaleY(0.4);
		-webkit-box-shadow: 1px 1px 12px 1px #8C8C8C;
		-moz-box-shadow: 1px 1px 12px 1px #8C8C8C;
		-o-box-shadow: 1px 1px 12px 1px #8C8C8C;
		-ms-box-shadow: 1px 1px 12px 1px #8C8C8C;
		box-shadow: 1px 1px 12px 1px #8C8C8C;
	}

Puedes ver el ejemplo, con todos los detalles de código y descargarlo en este enlace en Codepen.

Mariano J.

Escribe un comentario

Tu email no se hará visible