como hacer Efecto "cine"

redvirus13 · #1 (**permalink**) 04/05/2011, 08:45

hola quisiera saber como hacer un efecto parecido al de esta pagina

http://www.moviezet.com/movies/tucker-and-dale-vs-evil/

al pulsar el foquito la pagina se oscurece menos el video y quisiera hacer ese tipo de efecto en mi web en el cual pienso poner videos ..

espero me puedan ayudar

omarMusic · #2 (**permalink**) 04/05/2011, 09:46

Algo básico seria lo siguiente:

Código HTML:

Ver original<html>
<head>
<style type="text/css">
* {margin: 0; padding: 0;}
#luces {position:absolute; background: #000; opacity: 0.8; filter:alpha(opacity=80); width: 100%; height: 100%; z-index: 4}
#video {text-align:center; background: yellow; position:absolute; margin: 100px 0px 0px 350px; width: 300px; height: 200; z-index: 5;}
#botonApagar {margin-top: 150px;}
</style>
<script type="text/javascript">
function apagar() {
    var luces = document.getElementById("luces").style
    luces.display = luces.display == "none"?"block":"none"
    var boton = document.getElementById("botonApagar")
    boton.value = luces.display == "none"?"Apagar":"Encender"
}
</script>
</head>
<body>
<div id="luces" style="display: none"></div>
<a href="#">Enlace</a>
<div id="video">
<input type="button" value="Apagar" onclick="apagar()" id="botonApagar" />
</div>
</body>
<html>

Saludos!

livemusic · #3 (**permalink**) 04/05/2011, 17:47

Lo que buscas se llama overlay, que es la superposición de un elemento, que en caso de los ligthbox genera una opacidad de la pantalla cuando ejecutas un evento..
Te recomiendo que veas esta pagina...

http://fancybox.net/blog

4. Show youtube clips // en el tip 4 veras.. lo que buscas

InKarC · #4 (**permalink**) 04/05/2011, 19:27

Debería ser con una barrita en vez de un botón; para que el usuario pudiera poner el grado de oscuridad que quiera.

angelfcm · #5 (**permalink**) 04/05/2011, 21:36

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!!

redvirus13 · #6 (**permalink**) 08/05/2011, 23:08

grax a todos :D , sin duda el mejor foro de ayuda :D

angelfcm · #7 (**permalink**) 09/05/2011, 18:58

No hay de que, saludos!