Blog do Maujor - Tutoriais e pensamentos, CSS, web standards, acessibilidade, tableless

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!

Retweet this post

----------------x-x-x---------------    fim da matéria    ---------------x-x-x---------------

Livros do Maujor

              

Esta matéria foi publicada em: 2009-07-29 (quarta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2009/07/29/efeito-apagar-as-luzes/trackback no seu site.