Ver Mensaje Individual
  #5 (permalink)  
Antiguo 04/05/2011, 21:36
angelfcm
(Desactivado)
 
Fecha de Ingreso: abril-2011
Mensajes: 153
Antigüedad: 10 años, 7 meses
Puntos: 236
Respuesta: como hacer Efecto "cine"

Hola que tal!
No tenía que nada que hacer aqí que me tome un tiempo haciendo este ejemplo:

Código HTML:
<html>
<head>
<script src="jquery.js">
</script>
<script>
function abrirVideo(){
 //desocultamos el bloqueador
 $("#div_bloqueador").css("display","block");
 //usamos jquery para aplicar el efecto de oscurecimiento y cuándo termine se muestre el div con el video
 $("#div_bloqueador").fadeTo("slow",0.6,function(){$("#div_sobrepuesto").fadeTo(1200,1,function(){$("#video").css("visibility","visible")});});
}
function cerrarVideo(){
 //ocultamos el video
 $("#video").css("visibility","hidden");
 //desvanecemos el contenedor del video y después el bloqueador
 $("#div_sobrepuesto").fadeTo(1200,0,function(){$("#div_bloqueador").fadeTo("slow",0,function(){$("#div_bloqueador").css("display","none");$("#video").css("visibility","hidden");})});
}
</script>
<style type="text/css">
/*z-index es una propiedad que si es mayor al de otro elemento será puesto encima de él. */
*{
margin:0px;
padding:0px;
z-index:0;/* se coloca cero a todo para asegurar que los divs de abajo sean superpuestos, aunque generalmente cero es el predeterminado */
}
#div_sobrepuesto{/* éste div es dónde va el video "Por así decirlo". */
  display:none;/* se oculta al iniciar la página */
  z-index:10;/* se aplica que debe superponerse a cualquier elemento inferior en z-index */
  position:absolute;/* para que pueda colocarse en medio y no mueva nada más */
  background:#a50;
  border:2px solid #000;
  width:550px;
  height:350;
  text-align:center;
  top:10px;
  left:20%;/* lo colocamos en medio (en mi caso solo le tanteo hehe) */
  opacity:0.0;
  filter:alpha(opacity=0);
}
#div_bloqueador{/* éste bloqueará la página para que no se pueda dar click a nada más que al contenido del #div_sobrepuesto */
  background:#000;/* se elige cualquier color oscuro para desvanecerlo */
  opacity:0.0; /* para que al abrir el video haga un efecto de oscurecimiento es de 0 a 1: 1 es sin opacidad y 0 con total opacidad (blanco) */ 
  filter:alpha(opacity=0); /* IE exíge ésta propiedad (la de arriba es para mozilla) aqui es de 0 a 100 */
  display:none;/* lo ocultamos para que no bloquié la página */
  z-index:5; /* es mayor que cualquier elemento de la página pero menor que el #div_soprepuesto */
  width:100%;
  height:100%;/* se aplica la medida completa para que tape toda la página aunque es conveniente usar pixéles si cuentas con medidas exactas de tu página para que se tape bien */
  position:absolute;/* para que pueda tapar todo sin mover nada */
  top:0px;
  left:0px;/* lo colocamos hasta la esquina para que cubra todo */
}
</style>
</head>
<body>
<table style="color:#fff;background:#449;width:100%;font-weight:bold;font-size:20px;"><tr><td width="20%">Inicio</td><td width="20%">Peliculas</td><td width="20%">Foros</td><td width="20%">Contacto</td><td width="20%">Mi cuenta</td></tr></table>
<h1>CONTENIDO DE LA PÁGINA</h1>
<input type="button" value="Ver video!" onclick="abrirVideo()" style="font-size:20px;font-weight:bold" />
<div id="div_sobrepuesto">
  <!-- contenido, por ejemplo pondré un video -->
  <h2>Peliculas - Peliculas - Peliculas - Peliculas</h2>
  <iframe id="video" style="visibility:hidden" width="400" height="280" src="http://www.youtube.com/embed/gTfmSf5I2uM" frameborder="0" allowfullscreen></iframe>
<br /><input type="button" value="CERRAR" onclick="cerrarVideo()" />
</div>
<div id="div_bloqueador"></div>
</body>
<html> 
Si no conoces JQuery, te recomiendo que le des un chequeo a un manual, es sencillo, muy fácil y cómodo de usar. Tiene muchos efectos además de fadeTo muy bueno y así te ahorra tiempo, sin embargo deberías de ingeniartelas sin usar JQuery de vez en cuándo, para prácticar y mejorar tu javascript, Saludos!!

Última edición por angelfcm; 07/05/2011 a las 11:46