Hace unas semanas necesitaba crear un modo cine (oscurecer toda la pantalla salvo un elemento -típicamente un vídeo-) para un proyecto que me encargaron. Buscando un poco, descubrí que era mucho más fácil de lo que pensaba: sólo hacen falta un par de líneas de HTML, CSS y JavaScript.
Efecto a conseguir
Púlsame para activar el modo cine
Nota: ¡Me encanta ese perro! 😀
Cómo se consigue
El efecto se consigue creando un elemento con HTML, aplicándole CSS para que ocupe toda la pantalla y se sitúe encima de todos los elementos salvo el vídeo o elemento al que queramos dar importancia:
<div id="overlay" style="position: fixed; top: 0; left: 0; background: black; display: none; z-index: 999; width: 100%; height: 100%;"></div>
Fíjate en cómo se le pone display:none
para que no es muestre originalmente. Para este efecto tiene vital importancia la propiedad z-index
, que establece la posición de un elemento en el eje z: en otras palabras, la profundidad a la que se sitúa. La vista 3D de Firefox es muy útil para visualizar esto.
El valor de z-index
puede ser el que quieras. El único requisito es que tiene que ser mayor que el de cualquier otro elemento de la página, excepto el del vídeo:
<div id="video" style="position: relative; z-index: 1001;">http://www.youtube.com/watch?v=4PcL6-mjRNk</div>
El valor de z-index
para el vídeo es de 1001 -mayor que 999- y, por tanto, se mostrará por encima del overlay.
Una vez establecidos los elementos, lo único que nos queda es activarlos/desactivarlos. Para eso usaremos JavaScript (en mi caso jQuery, pero se puede conseguir lo mismo con JS simple):
<script type="text/javascript"> $('#activate').click(function(e){ e.preventDefault(); $('#overlay').toggle().click(function(){ $(this).hide(); }); }); </script>
Traducido, este código dice:
- Cuando alguien haga click en el elemento
#activate
, evita que el enlace lleve a su destino. - Cambia la visibilidad del elemento
#overlay
(si no está visible, hazlo visible; y viceversa) - Haz que cuando alguien haga click en
#overlay
, éste se oculte.
Conclusión
Un efecto muy vistoso y muy fácil de conseguir. Si queremos mejorarlo, se pueden poner transparencias, algún efecto o transición, etc. Eso ya depende de la creatividad de cada uno 🙂
Tutorial original: http://bloggersbazaar.blogspot.com.es/2012/05/add-cinema-mode-to-your-blog.html