Efecto mascara con JQUERY

Posteado el 02. Aug, 2010 por tuto in Desarrollo Web, Jquery

Aqui esta el demo de lo que aprenderás en este tutorial

PASO 1
Creamos una carpeta nueva llamada “mascara en jquery” y dentro de ella creamos una carpeta con el nombre de imágenes dentro de la cual vamos a agregar las imágenes que vamos a utilizar para nuestro efecto de mascara.

Efeccto máscara con JQUERY

Las imágenes que estoy utilizando son la imagen de un personaje, la imagen invertida de este mismo personaje y una imagen que nos servirá de máscara.

PASO 2
Aquí les muestro la imagen que vamos a utilizar como máscara para nuestro efecto tiene el mismo ancho que las imágenes de los personajes.

Efeccto máscara con JQUERY

PASO 3
Ahora vamos a Dreamweaver y creamos un nuevo documento HTML en blanco.

Efeccto máscara con JQUERY

PASO 4
Con el comando Ctrl + S guardamos nuestro documento HTML dentro de la carpeta mascara en jquery con el nombre mascara.html

Efeccto máscara con JQUERY

PASO 5
Una vez guardado nuestro documento con el comando Ctrl + N creamos un nuevo documento CSS.

Efeccto máscara con JQUERY

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

Code block

*{
    	margin:0;
    	padding:0;
    }
    body {
    	text-align: center;
    	background: #A4CAEF;
    }
    h2{
		font: 30px Georgia, serif;
		color: #31414F;
		margin-top: 20px;
	}
    #content{
    	width: 380px;
    	height: 600px;
		margin: 0px auto;
	}
	#buttonbox{
		float: left;
		clear: right;
		width: 250px;
		height: 300px;
		background: #779DBF;
		border-bottom: 5px solid #4F687F
	}
	#buttonbox a{
		color: #fff;
		font: 24px Georgia, serif;
	}
	#buttonbox a:hover{
		text-decoration: none;
	}
	#guy, #dude{
		float: left;
		clear: right;
		margin: 20px;
	}
 
    #guycontainer{
    	position: relative;
		overflow: hidden;
		height: 581px;
		width: 317px;
		background: #FFF;
	}
    .frame{
    	position: absolute;
		z-index: 3;
	}
	#guyoverlay{
		top: -90px;
		position: absolute;
		z-index: 1;
	}
	#guyblock{
		height: 581px;
		width: 317px;
		background: #FFF;
	}
	#guyedge{
		height: 90px;
		width: 317px;
		background: url('../imagenes/mascara.png');
	}
	img.loadpic{
		margin: 10px;
	}

Efeccto máscara con JQUERY

PASO 7
Ahora con el comando Ctrl + S guardamos nuestro documento CSS dentro de la carpeta “mascara en jquery” carpeta css con el nombre mascara.css

Efeccto máscara con JQUERY

PASO 8
Regresamos a nuestro documento HTML y copiamos el siguiente código debajo de la etiqueta .

Code block

<link href="css/mascara.css" rel="stylesheet" type="text/css" />
 
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#guyoverlay").stop().animate({top:'671px'},{queue:false,duration:5000} );
			$("#dudeoverlay").stop().animate({top:'-665px'},{queue:false,duration:3500} );
		});
	</script>

Efeccto máscara con JQUERY

PASO 9
Dentro de las etiquetas vamos a copiar el siguiente código

Code block

<div id="content">
		<div id="guy">
		  <div id="guycontainer">
			  <div class="frame"><img src="imagenes/chicoinvertido.png"/></div>
  <div id="guyoverlay">
					<div id="guyedge"> ;</div>
					<div id="guyblock"> ;</div>
		    </div>
			  <img class="loadpic" src="imagenes/chico.jpg"/>			</div>
		</div>
	</div>