Blog Reacción Estudio

¡Tu zona de aprendizaje!

luces

Efecto apagar y encender las luces en tu sitio web

Seguramente en muchas webs de Streaming de video podréis ver que tienen un botón u opción para poner el fondo de la página en negro y resaltar el reproductor de video, a esto se le conoce como apagar y encender las luces del sitio web en cuestión. Pues bien, utilizando CSS, jQuery y HTML vamos a aprender cómo hacer esto de forma muy sencilla.

HTML

<div id="luces"></div>
        
<div id="video">
     	<iframe width="420" height="315" src="http://www.youtube.com/embed/PwfQSWoyA5k" frameborder="0" allowfullscreen></iframe>
</div>
        
<input type="button" value="Apagar/encender las luces" id="apagar" />

La capa “luces” es aquella que va a cubrir toda la página en negro, más adelante veremos las propiedades CSS que le daremos a ésta. Después, la capa “video” es una capa que hemos utlizado para poner un video de Youtube centrado en la página. Por último ponemos un botón para encender y apagar las luces.

CSS

body{
	margin:0;
}
			
#luces{
	background-color:black;
	opacity:0.9;
	position:absolute;
	height:100%;
	width:100%;
	z-index:1;	
}
			
#video{
	position:absolute;
	z-index:2;
				
	height:315px;
	width:420px;
				
	top:50%;
	left:50%;
				
	margin-left:-210px;
	margin-top:-157px;				
}
			
input[type="button"]{
	position:absolute;
	z-index:2;
				
	height:40px;
	font-size:16px;
	margin-left:20px;
	margin-top:20px;
}

A la capa “luces” la ponemos el fondo negro, algo de opacidad al fondo, altura y anchura al 100% para que ocupe toda la página y posición absoluta con el “z-index” al “1“. Si queremos que otros elementos estén por encima de ésta capa, como hemos hecho con la capa “video“, debemos ponerle a la propiedad “z-index” un valor mayor al de la capa “luces“, en este caso como tiene que ser mayor que “1” le ponemos a la capa “video” el valor “2“.

Hacemos lo mismo con el botón para apagar y encender las luces.

jQuery

Incluímos la librería jQuery desde la CDN de Google:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Ahora vamos con el código:

$(document).ready(function(){
				
	//escondemos el div
	$("#luces").hide();
				
	$("#apagar").click(function(){
				
		$("#luces").fadeToggle(250);
			
	});
				
});

El código anterior es muy simple, cuando se pincha en el botón de encender o apagar las luces, muestra o esconde la capa “luces” dependiendo si las luces están apagadas o encendidas.

Así de simple. Cualquier consulta no duden en preguntar.

Ver ejemplo

  • JhanZhitho Kevin

    lo descuadra el reproductor a un costado de la web

    • Alberto

      Puede que no lo hayas implementado bien en tu sitio web o que algún estilo interfiera, ya que en el ejemplo como puedes ver no descuadra el reproductor.

  • Hiram

    Gracias, es de mucha utilidad.

  • Carlos

    Muchas gracias, Creí que era mas complicado pero es sincillisimo… El ejemplo es perfecto !

  • sanctusen666 .

    como pongo el boton donde quiera arrastrandolo??

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies.     ACEPTAR