Gracias por visitar www.lewebmonster.com :) Los artículos publicados en este blog son completamente originales. La mayoría de los mismos contienen ejemplos o archivos que pueden descargarse para mayor comodidad del visitante (usted); el único requisito para realizar descargas es estar registrado (el registro es completamente gratis y no se le va a enviar ningún tipo de publicidad a su correo electrónico). Si desea colaborar con el crecimiento de este blog, por favor, de un Like en la parte superior derecha de esta página. Gracias!

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)

Ya algunos sabrán que la mayoría de los ejemplos expuestos en este sitio provienen de www.calirojas.com (lo que en algún momento fue mi blog personal). Este es mi primer post para www.lewebmonster.com y vamos a animar un escenario básico, utilizando una técnica sumamente sencilla y que no requiere de plugins o scripts de terceras partes.

¿Cómo animar un escenario con JQuery?

Nuestro escenario constará de un fondo y un par de objetos que se encuentren en movimiento, para darle al usuario una experiencia más agradable. En este caso todos los elementos del escenario estarán en movimiento, siempre o dependiendo del evento que se produzca.

Animaremos un fondo con montañas y agregaremos nubes y un leopardo al escenario. Inicialmente solo veremos el efecto de las nubes en movimiento, y al colocar el mouse sobre el fondo podremos visualizar un leopardo corriendo (en este justo momento el fondo comienza a moverse para dar un efecto más realista).

Para animar el escenario utilizaremos el método setInterval de JavaScript y la propiedad background-position de CSS. Con esos dos simples métodos logramos un efecto bastante interesante. Para ver el ejemplo en vivo haga clic aquí o en la imagen al inicio del artículo.

Código para animar un escenario con JQuery

Al igual que en mi anterior blog (www.calirojas.com), se seguirá la misma “dinámica” de colocar el código completo debidamente comentado. Cualquier duda, corrección o sugerencia la pueden publicar por medio de los comentarios.

Código HTML para animar un escenario con JQuery

<!DOCTYPE html>
<html>
	<head>
		<title>Ejemplo de c&oacute;mo animar un escenario con JQuery - lewemonster.com</title>
		<link rel="stylesheet" type="text/css" href="css/escenario.css">
	</head>
	<body>
		<h1>Animaci&Oacute;n de escenario con JQuery <em>&iexcl;sin plugins!</em></h1>
		<h2>Ejemplo por Cali Rojas - <a href="http://www.lewebmonster.com">www.lewebmonster.com</a></h2>
		<h2><em>Para ver la animaci&oacute;n coloque el puntero del rat&oacute;n sobre el fondo</em></h2>
		<div id="divContenedor">
			<div id="divFondo">
				<div id="divNubes"></div>
				<div id="divLeopardo"><img src="img/leopardo.gif"></div>
			</div>
		</div>
		<script type="text/javascript" src="js/ext/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="js/animar-escenario.js"></script>
	</body>
</html>

Código CSS para animación básica de escenarios con JQuery

body{
	background: #666;
}
a{
	color: #fff;
}
h1{
	color: #fff;
	text-align: center;
	font: 18px normal Tahoma, Verdana, Arial, sans-serif;
	padding: 15px 0 0px 0;
	margin: 0;
	text-transform: uppercase;
}
	h1 em{
		font-size: 11px;
		font-weight: bold;
	}
h2{
	color: #fff;
	text-align: center;
	font: 12px normal Tahoma, Verdana, Arial, sans-serif;
	padding: 0 0 15px 0;
	margin: 0;
}
#divContenedor{
	border: solid 1px #777;
	box-shadow: 0 0 7px #000;
	height: 400px;
	width: 900px;
	margin: 0 auto;
	/*
	 * esta capa contiene todos los elementos involucrados en la animacion
	 * normalmente no tendria sentido colocarla (porque en realidad no es necesario)
	 * pero le agregue un efecto de sombra... si colocamos este efecto de sombra (box-shadow)
	 * a la capa que contiene el fondo --la animacion se ve lenta--
	 */
}
#divFondo{
	height: 400px;
	width: 900px;
	background: url(../img/fondo.jpg);
	/*
	 * el fondo se debe repetir.. al menos hacia la derecha, ya que es por medio de este
	 * fondo infinito que realizamos la animacion... ahi esta el truco
	 */
}
	#divNubes{
		width: 100%;
		height: 151px;
		background: url(../img/nubes.png);
		/*
		 * el fondo se debe repetir.. al menos hacia la derecha, ya que es por medio de este
		 * fondo infinito que realizamos la animacion... ahi esta el truco
		 */
	}
	#divLeopardo{
		margin-top: 170px;
		text-align:center;
	}
		#divLeopardo img{
			display: none;
		}

Código JavaScript para animar escenario

$(function(){
	//variable para controlar el movimiento del fondo
	var blnDetener=true;
	
	//intervalo de movimiento para el fondo				
	var tmrFondo=setInterval(function(){
		//ejecutamos la animacion solo si el puntero del raton esta sobre el fondo
		if(!blnDetener){
			//obtenemos el valor de la propiedad background-position
			var strPosicion=$('#divFondo').css('background-position');
			//obtenemos la posicion de la cadena "px" (la utilizamos para obtener
			//solamente la coordenada que nos interesa animar o cambiar)
			var iPosicion=strPosicion.indexOf('px');
			
			//animamos
			if(iPosicion!=-1){
				//movemos el fondo 3 pixeles
				$('#divFondo').css('background-position',(parseInt(strPosicion.substr(0,iPosicion)))-3+'px 0');
			}else{
				//movemos el fondo 1 pixel (valor inicial, es decir, es la primera vez que
				//se ejecuta la animacion)
				$('#divFondo').css('background-position','1px 0');
			}
		}
	},10);
	
	//intervalo de movimiento para las nubes
	var tmrNubes=setInterval(function(){
		//obtenemos el background-position
		var strPosicion=$('#divNubes').css('background-position');
		var iPosicion=strPosicion.indexOf('px');
		
		if(iPosicion!=-1){
			//movemos el fondo de nubes 1 pixel
			$('#divNubes').css('background-position',(parseInt(strPosicion.substr(0,iPosicion)))+1+'px 0');
		}else{
			//establecemos la posicion predeterminada del fondo de nubes
			//esta es la primera vez que la animacion se ejecuta
			$('#divNubes').css('background-position','1px 0');
		}
	},70);
	
	//eventos al colocar el puntero del raton sobre el fondo
	$('#divFondo').hover(function(){
		//indicamos que el fondo se va a mover
		blnDetener=false;
		//mostramos el leopardo suavemente
		$('#divLeopardo img').stop(true,true).fadeIn();
	},function(){
		//indicamos al temporizador que no mueva el fondo
		blnDetener=true;
		//ocultar el leopardo suavemente
		$('#divLeopardo img').stop(true,true).fadeOut();
	});
});

Conclusión

Eso es todo lo que se debe hacer para realizar una animación básica de un escenario con JQuery. Esto lo podemos utilizar para crear animaciones sencillas y hasta juegos; simplemente se debe usar un poco la imaginación. Espero que les haya gustado el artículo. Nos vemos pronto programando juegos sencillos con JavaScript y la librería JQuery.

Créditos

La imagen de fondo fue tomada de VectorJeff.

Enlaces

Escrito por Cali Rojas

Cali Rojas

Senior Front-End/Back-End Web Developer y diseñador de GUI’s, nacido en Costa Rica. Utilizo tecnologías como JavaScript Orientado a Objetos, HTML5, CSS3 y jQuery; MySQL, PHP, Python, LESS, SASS, etc. Linuxero por elección (Debian). Autor de jsmConsole (JavaScript Mobile Console) y Mopix.js (Mobile Pixel Perfect). Fundador de este blog.

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)
VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

Compartir este artículo

Si le pareció interesante el contenido de este artículo, por favor, compártalo con sus amigos y conocidos por medio de las principales redes sociales.

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Artículos relacionados

Categorías: jQuery

4 comentarios hasta el momento. Haga clic aquí para ver u ocultar los comentarios.

  1. eder toledo dice:

    Un gran tutorial ya que no simplemente agarras el monton de codigo y lo pegas…si no que te diste el tiempo de comentar y estructurarlo bien. Simple y efectivo. Se te agradece. Tengo una idea de una animacion de este tipo.

  2. hugo-chivo dice:

    Realmente excelente tu ejemplo, muy bien comentado y sencillo..!!! Te felicito y te agradezco por compartir tu conocimiento, me sirvio de mucho

Deje un comentario

Su información personal no será compartida con otros sitios y/o personas.