Efecto mascara con JQUERY

Posteado el 02. Aug, 2010 por 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

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

Efeccto máscara con JQUERY

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

Efeccto máscara con JQUERY

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

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

Efeccto máscara con JQUERY

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

*{
    	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

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

Efeccto máscara con JQUERY

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

<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

Efeccto máscara con JQUERY

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

<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>
Efeccto máscara con JQUERY

Efeccto máscara con JQUERY

PASO 10
Listo ya tenemos nuestro efecto de mascara terminado.

Efeccto máscara con JQUERY

Efeccto máscara con JQUERY

Descarga Efecto mascara con JQUERY


Tags: , ,

Deja tu Comentario

Tutoriales en la web se reserva el derecho de moderación de los comentarios. Evita por favor utilizar palabras soeces, ataques directos e insultos, de lo contrario tu comentario será eliminado.

Hire PHP Developer India
Get Adobe Flash player