Tutoriales en la web

Postal animada con JQUERY

Posteado el 30. Jul, 2010 por tuto in Desarrollo Web, Jquery

Aqui puedes ver el demo de lo que aprenderas en este tutorial de JQUERY

PASO 1
Creamos una carpeta nueva llamada animación de una postal y dentro de esa carpeta creamos otra carpeta llamada imágenes en la cual vamos a guardar todas las imágenes que vamos a usar para nuestra postal.

Postal animada con JQUERY

PASO 2
Ahora vamos a Adobe Dreamweaver creamos un nuevo documento HTML en blanco.

Postal animada con JQUERY

PASO 3
Con el comando Ctrl + S guardamos nuestro documento dentro de la carpeta animación de una postal con el nombre postal animada.html

Postal animada con JQUERY

PASO 4
Debajo de la etiqueta Postal animada con Jquery copiamos y pegamos el siguiente código

Code block

<link href="css/postal.css" rel="stylesheet" type="text/css" />
 
	<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
	<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			setTimeout("animation()",300);
		});
 
		function animation(){
			sun_raft();
			cloud1();
			cloud2();
			cloud3();
			$("#greetings").animate({top: '125px' }, {queue:false, duration:600, easing:'easeOutBounce'});
			$("#stamp").animate({left: '595px' }, {queue:false, duration:1200, easing:'easeOutBounce'});
		}
 
		function sun_raft(){
			$("#sun").animate({opacity:".7"},1000).animate({opacity:"1"},1000);
			$("#raft").animate({top:"-=5px"},1000).animate({top:"+=5px"}, 1000);
			$("#raftripple").animate({opacity:".1"},1000).animate({opacity:"1"},1000);
			setTimeout("sun_raft()",2000);
		}
		function cloud1(){
			$("#cloud1").animate({left:"+=850px"},10000).animate({left:"-150px"}, 0)
			setTimeout("cloud1()",10000);
		}
		function cloud2(){
			$("#cloud2").animate({left:"+=950px"},9000).animate({left:"-250px"}, 0)
			setTimeout("cloud2()",9000);
		}
		function cloud3(){
			$("#cloud3").animate({left:"+=800px"},6000).animate({left:"-100px"}, 0)
			setTimeout("cloud3()",6000);
		}
 
	</script>

Postal animada con JQUERY

PASO 5
Con el comando Ctrl + N Creamos un nuevo documento CSS.

Postal animada con JQUERY

PASO 6
Ahora con el comando Ctrl + S lo guardamos dentro de la carpeta animación de una postal – carpeta css.

Postal animada con JQUERY

PASO 7
Copiamos el siguiente código dentro de nuestro documento CSS.

Code block

*{ margin:0; padding:0; }
body { text-align: center; background: #111; }
#wrapper{ margin:0px auto; width:700px; }
#content{ position:relative; width:700px; height:300px; top:30px; overflow:hidden; border:5px solid #f5f5f5; background: url('../imagenes/fondo.jpg'); }
#sun{ position:absolute; top:10px; left:30px; }
 
#cloud1{ position:absolute; top:60px; left: -150px; z-index:5; }
#cloud2{ position:absolute; top:40px; left: -250px; z-index:4; }
#cloud3{ position:absolute; top:25px; left: -100px; z-index:3; }
 
#raft{ position:absolute; top:220px; left: 312px; z-index:20; }
#raftripple{ position:absolute; top:220px; left: 309px; z-index:19; }
 
#greetings{ position:absolute; top:-51px; left: 200px; z-index:21; }
#stamp{ position:absolute; top:5px; left: 801px; z-index:21; }

Postal animada con JQUERY

PASO 8
Ahora regresamos a nuestro documento HTML y dentro de las etiquetas copiamos el siguiente código

Code block

<div id="wrapper">
		<div id="content">
			<div id="sun"><img src="imagenes/sol.gif"/></div>
			<div id="cloud1"><img src="imagenes/nube1.png"></div>
			<div id="cloud2"><img src="imagenes/nube2.png"></div>
			<div id="cloud3"><img src="imagenes/nube3.png"></div>
			<div id="raft"><img src="imagenes/flotador.png"></div>
			<div id="raftripple"><img src="imagenes/sombra.gif"></div>
			<div id="greetings"><img src="imagenes/tutoriales.png"></div>
			<div id="stamp"><img src="imagenes/estampilla.png"></div>
		</div>
	</div>