jQuery – efeito apagar as luzes
Publicado em: 2009-07-29 — 33.799 visualizacoes
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!
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
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.
Olá amigo, estou com uma dificuldade na criação de um site de turismo, é o seguinte, tem um box da decolar em javascript que vai dentro do site do cliente, e sempre que eu coloque este box ele desabilita o flexslider, não importa onde eu coloco. Já tentei por em iframe, dai funciona mas o box corta por que ele tem um box date que expande ao inserir datas.
agradeço sua atenção e conhecimento. segue link do site http://www.setetravel.com.br/index_new.html
Olá, eu gostaria de saber se é possível trocar o player do YouTube por outro
obrigado, funcionou!
ola gostaria de saber como aplicar esse efeito em uma tabela por exemplo ou divapp nao em videos.
aguardo a resposta por gentileza, otimo site.
Tentei várias vezes fazer o código funcionar. Eu só consegui com o jquery.min.js do Google.
Obrigado!
[…] http://www.maujor.com/blog/2009/07/29/efeito-apagar-as-luzes/ […]
Pra fazer funcionar no IE9 fiz o seguinte…
coloquei o seguinte trecho:
Apagar luzesno mesmo container do trecho:
Obs: se colocar em containers diferentes, não funciona no IE
Ai apliquei os seguintes estilos a classe interruptor:
.interruptor {
position:fixed;
top:10%;
left:0;
z-index: 2;
display:block;
width:120px;
margin-top: 25px;
}
Comigo funcionou.
😀
Pra fazer funcionar no IE9 fiz o seguinte…
coloquei o seguinte trecho:
Apagar luzes
no mesmo container do trecho:
Obs: se colocar em containers diferentes, não funciona no IE
Ai apliquei os seguintes estilos a classe interruptor:
.interruptor {
position:fixed;
top:10%;
left:0;
z-index: 2;
display:block;
width:120px;
margin-top: 25px;
}
Comigo funcionou.
😀
Muito bom mestre !!
seu post veio na hora certa.
muito brigadinha
Marcia
porque o meu nao apaga? eu fiz certinho mais nao apaga . fica normal!
Não consigo fazer isso funcionar de jeito nenhum no IE7. O z-index simplesmente não funciona. =/
Show o efeito, tinha visto no youtube…
Parabens!!
Legal vc comentar sobre esse efeito, acho ele muito bacana!
Aqui no Chrome (2.0.172.39) funcionou…
Muito bom o post, vou adptar o código para poder fazer tipo aquelas banners flutuantes sendo que na entrada do site….
vlw
No CHROME não funciona, mas deixa pra lá ele ainda não é um navegador!!
Maurício,
Por desatenção, usei o código do site do janko e não o que você publicou. 🙂
[ ]s
Muito bom! Roda no IE normal!
@medisse
Se modificar o código, conforme sugeri, no post anterior, não ocorrerá erro no IE6. Fiz os testes usando o IETester.
[ ]s
Maurício,
Li a sua dúvida, no site do Janko, com relação ao IE7.
Após analisar e fazer alguns testes, descobri que basta acrescentar a declaração
z-index:101;no bloco#container.[ ]s
—————————————————-
Editado pelo Maujor:
Francisco: Obrigado, mas após ter postado a dúvida descobri o fix. O z-index para o container
deve ser maior que o da máscara e não necessariamente 101. No meu exemplo usei z-index = 2 e ele funciona normalmente no IE7.
Vlw, com certeza vou usar.
Obrigado pela dica
Denize
… digo, na bosta do IE 6…
Muito bom! Obrigado pela dica. Estou lendo seu livro de CSS e em breve pretendo começar a estudar JQuery também.
não funciona no IE… 🙁
vou utilizar juntamente com os códigos do Joomla!
Muito bom! parabéns
Eu preciso fazer esse efeito em um projeto no trabalho, seu post veio na hora certa.
Obrigado =D
Muito legal, agora só falta a pipoca xD