jQuery – efeito apagar as luzes

Alguns vídeos postados no YouTube apresentam uma funcionalidade denominada “Turn the lights down”. O termo traduzido significa “Apague as luzes”. Trata-se de um efeito no qual toda a págiana web é obscurecida exceto a área onde se encontra o vídeo. Algo muito parecido com o efeito “lightbox”.

Esta matéria se baseia no post original do desenvolvedor Janko residente em Belgrado capital da Sérvia e tem por finalidade demonstrar como obter o efeito “Apague as luzes” com uso de jQuery

Desenvolvi uma página web com o efeito proposto e caso você queira conhecê-lo antes de prosseguir a leitura visite jQuery – efeito apagar as luzes – Página demonstração

A obtenção do efeito é muito simples, o que é uma característica básica do desenvolvimento com jQuery.

Para a marcação HTML precisamos tão somente de um elemento link para conter o comando de apagar e acender as luzes, um div para conter o vídeo e um div para servir de máscara para a cobertura da tela. Isto nos leva a uma marcação como mostrada a seguir

Marcação HTML

Observe a marcação HTML relevante que foi desenvolvida para o exemplo que ilustra esta matéria.

...
<a class="interruptor" href="#">Apagar luzes</a>

<div id="filme">  
<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/gsSmtvzegAQ&hl=pt-br&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always">
</param>
<embed src="http://www.youtube.com/v/gsSmtvzegAQ&hl=pt-br&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
</object>
</div> 
...
<div id="mascara"></div>
</body>
</html>

Simples não é? Notar que o div#filme contém uma marcação HTML para vídeo fornecida pelo e linkada do YouTube

Regras CSS

É importante a definição correta da propriedade CSS z-index para os elementos da página de modo a que o link para acender não seja obscurecido pela máscara. Observe as regras CSS que usei para a página demonstração.

<style type="text/css" media="all">
#filme {
 position:relative;
 z-index:2;
 margin:20px 0 20px 50px;
 }
.interruptor { 
 position:relative; 
 z-index:2;
 display:block; 
 width:120px;
 margin-top: 25px;
 }
#mascara {
 position:fixed;
 top:0;
 right:0;
 bottom:0;
 left:0;
 height:100%;
 width:100%;
 margin:0;
 padding:0;
 background:#000;
 opacity:.75;
 filter: alpha(opacity=75);
 -moz-opacity: 0.75;
 z-index: 1;
 }   
a.interruptor {
 font-size:14px;
 color:#fff;
 background:#98bbbd;
 text-align:center;
 } 
a.apaga-acende {
 background:#ccc;
 color:#333;
 }
</style>

O importante das regras CSS mostradas são as declarações position e z-index como frizamos e as regras CSS para a div#mascara. Notar para esta que usamos declarações proprietárias que tornam possível uma opacidade crossbrowser para a máscara.

Script jQuery

E, finalmente em toda sua glória e simplicidade o script jQuery que faz a mágica.

<script type="text/javascript">
$(document).ready(function(){
 $('#mascara').css('height', $(document).height()).hide();
  $('.interruptor').click(function(e) {
   e.preventDefault();
   $('#mascara').toggle();
    if ($('#mascara').is(':hidden')) {
     $(this).html('Apagar luzes').removeClass('apaga-acende');
    } else {
     $(this).html('Acender luzes').addClass('apaga-acende');
    }
  });
        
});
</script>

Notar de importante neste script que a altura da div#mascara foi definida pelo script. Porque com CSS a declaração height: 100% não é suportada por todos os navegadores, então fizemos isto com JavaScript usando a propriedade $(document).height. Assim conseguimos que a máscara ocupe toda a altura da janela independentemente da resolução e crossbrowser.

As demais linhas do script dispensam maiores comentários.

Bom proveito. jQuery torna tudo muito simples!