Foros del Web » Programando para Internet » Javascript »

como hacer Efecto "cine"

Estas en el tema de como hacer Efecto "cine" en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 04/05/2011, 08:45
 
Fecha de Ingreso: diciembre-2010
Ubicación: en la luna
Mensajes: 108
Antigüedad: 10 años, 9 meses
Puntos: 8
como hacer Efecto "cine"

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
  #2 (permalink)  
Antiguo 04/05/2011, 09:46
 
Fecha de Ingreso: febrero-2011
Ubicación: Evolandia
Mensajes: 103
Antigüedad: 10 años, 7 meses
Puntos: 10
Respuesta: como hacer Efecto "cine"

Algo básico seria lo siguiente:

Código HTML:
Ver original
  1. <style type="text/css">
  2. * {margin: 0; padding: 0;}
  3. #luces {position:absolute; background: #000; opacity: 0.8; filter:alpha(opacity=80); width: 100%; height: 100%; z-index: 4}
  4. #video {text-align:center; background: yellow; position:absolute; margin: 100px 0px 0px 350px; width: 300px; height: 200; z-index: 5;}
  5. #botonApagar {margin-top: 150px;}
  6. <script type="text/javascript">
  7. function apagar() {
  8.     var luces = document.getElementById("luces").style
  9.     luces.display = luces.display == "none"?"block":"none"
  10.     var boton = document.getElementById("botonApagar")
  11.     boton.value = luces.display == "none"?"Apagar":"Encender"
  12. }
  13. </head>
  14. <div id="luces" style="display: none"></div>
  15. <a href="#">Enlace</a>
  16. <div id="video">
  17. <input type="button" value="Apagar" onclick="apagar()" id="botonApagar" />
  18. </div>
  19. </body>

Saludos!
  #3 (permalink)  
Antiguo 04/05/2011, 17:47
Avatar de livemusic  
Fecha de Ingreso: abril-2011
Ubicación: Lima - Chorrillos
Mensajes: 150
Antigüedad: 10 años, 4 meses
Puntos: 18
Respuesta: como hacer Efecto "cine"

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
  #4 (permalink)  
Antiguo 04/05/2011, 19:27
 
Fecha de Ingreso: noviembre-2005
Mensajes: 426
Antigüedad: 15 años, 9 meses
Puntos: 87
Respuesta: como hacer Efecto "cine"

Debería ser con una barrita en vez de un botón; para que el usuario pudiera poner el grado de oscuridad que quiera.
  #5 (permalink)  
Antiguo 04/05/2011, 21:36
(Desactivado)
 
Fecha de Ingreso: abril-2011
Mensajes: 153
Antigüedad: 10 años, 4 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
  #6 (permalink)  
Antiguo 08/05/2011, 23:08
 
Fecha de Ingreso: diciembre-2010
Ubicación: en la luna
Mensajes: 108
Antigüedad: 10 años, 9 meses
Puntos: 8
Respuesta: como hacer Efecto "cine"

grax a todos :D , sin duda el mejor foro de ayuda :D
  #7 (permalink)  
Antiguo 09/05/2011, 18:58
(Desactivado)
 
Fecha de Ingreso: abril-2011
Mensajes: 153
Antigüedad: 10 años, 4 meses
Puntos: 236
Respuesta: como hacer Efecto "cine"

No hay de que, saludos!

Etiquetas: cine, efecto
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 2 personas




La zona horaria es GMT -6. Ahora son las 14:23.