Efectos para oscurecer e iluminar las ventanas

Esta es otra entrada a modode respuesta. Esta vez es Alex quien consulta por un efecto que oscurece la pantalla, dejando ciertos elementos visibles, algo que puede utilzarse, por ejemplo, para resaltar los videos.

Para que funcione necesitamos JavaScript y si bien podría ser posible hacerlo sin librerías adicionales, lo mejor es emplearlas para que el efecto sea más interesante. Vamos entonces a ver ejemplos tanto para JQuery (que son los scripts originales) como para Prototype + Script.aculo.us.

Para el primer ejempo usaremos jQuery así que debemos tener cargada la librería y luego, el script cuyo contenido se encuentra en este archivo de texto . Por último, las definciiones de CSS. Colocamos todo eso antes de </head>:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

<script type='text/javascript'>
//<![CDATA[
  ... y aquí pegamos el contenido del archivo de texto ...
//]]>
</script>

<style>
  #lightsoff-background  {
    height: 100%;
    left: 0;
    margin:0;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 20;
  }
</style>

Para utilizarlo en cualquier parte de nuestro blog, simplemente, agregamos un enlace de este modo:

<div id="lightsoff"><a href="#"> texto o imagen </a></div>

Un ejemplo online de esto, puede verse AQUÍ; oprimiendo el botón, la pantalla se oscurecerá dejando visible el video y haciendo click en cualquier parte de la pantalla, resturaremos la página a su estado original.

El segundo ejemplo también requiere jQuery y es una idea de Emanuele Feronato. Como en el caso anterior, requerimos tener la librería, el script cuyo contenido está en este archivo de texto y las definiciones de CSS, todas ellas las colocamos antes de </head>:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

<script type='text/javascript'>
//<![CDATA[
  ... y aquí pegamos el contenido del archivo de texto ...
//]]>
</script>

<style>
#the_lights{
    background-color: #000;
    display: none;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
  #standout{
    background-color: white;
    padding: 5px;
    position: relative;
    z-index: 1000;
  }
</style>

Por último, requerimos agregar un DIV extra en nuestro sitio así que lo agregamos al final, justo antes de </body>:

<div id='the_lights'></div>

A diferencia del caso anterior, lo que hace este script es preservar un área y oscurecer el resto; lo utilizamos de modo similar al anterior pero, en este caso, hay tres botones que sirven de enlace que colocamos dentro de un DIV donde también colocaremos todo eso que queremos resaltar:

<div id = "standout">
  <div id="turnoff"> LUCES NO </div>
  <div id="soft"> A MEDIA LUZ </div>
  <div id="turnon"> LUCES SI </div>
  ... y aquí ponemos lo que queremos que sea visible, por ejemplo un video ...
</div>

El ejemplo puede verse AQUÍ; y allí, son esos tres botones los que controlan la opacidad del la ventana.

Por último, si lo que usamos es Prototype + Scriptaculous, la solución es un poco menos profesional pero, se me ocurrió que podría hacerse de modo similar, mezclando un poco de las dos anteriores. Agregamos el script que puede descargarse desde este archivo de texto . También lo ponemos antes de </head>:

<script type='text/javascript'>
//<![CDATA[
  ... y aquí pegamos el contenido del archivo de texto ...
//]]>
</script>

Allí veremos tres funciones:

function getPageSize() es la misma que se usa para el primer ejemplo y es la que nos permite calcular la altura de la ventana a oscurecer
function lightsOFF() es la función que oscurecerá la pantalla
function lightsON() es la función que restaurará la pantalla

Luego, el estilo CSS:

<style>
  #OSCURECER { /* este es el div inferior, que ocupará toda la ventana */
    background-color:#000;
    opacity:0.9;
    filter:alpha(opacity=90);
    position: absolute;
    margin:0;
    padding: 0;
    z-index: 20;
    left: 0;
    top: 0;
}
#lightsONOFF { /* este es el enlace que eprmutará el estado de esa ventana */
  display: block;
  opacity: 1 !important;
  filter:alpha(opacity=100);
  position: relative;
  z-index: 30 !important;
  /* cualquier propiedad de estilo */
}
object,embed {
  opacity = 1 !important;
  filter:alpha(opacity=100);
}
</style>

Como en el segundo caso, agregaremos un DIV al final de nuestro sitio, antes de </body>:

<div id='OSCURECER' style='display:none;'/>

Y lo uilizaremos creando un enlace así:

<a href="javascript:lightsOFF();" id="lightsONOFF"> APAGAR LAS LUCES </a>

Al hacer click en ese enlace, se ejecutará la función lightsOFF() y allí, se establecerán las propiedades CSS faltantes del DIV OSCURECER que estaba oculto (width y height) y se lo mostrará, usando Effect.Appear. Además, cambiaremos el atributo href del enlace llamado lightsONOFF para que podamos restaurar la ventana y su texto.

La función lightsON() hace lo contrario, restaura la ventana con Effect.Fade ocultando el DIV y vuelve a cambiar el atributo href y el texto del enlace lightsONOFF.

Este es el ejemplo que puede verse funcionando en esta entrada.

APAGAR LAS LUCES