jQuery – efeito apagar as luzes
Publicado em: 2009-07-29 — 34.097 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.
01....02.<a class="interruptor" href="#">Apagar luzes</a>03. 04.<div id="filme"> 05.<object width="425" height="344">06.<param name="movie" value="http://www.youtube.com/v/gsSmtvzegAQ&;hl=pt-br&fs=1&"></param>07.<param name="allowFullScreen" value="true"></param>08.<param name="allowscriptaccess" value="always">09.</param>10.<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>11.</object>12.</div> 13....14.<div id="mascara"></div>15.</body>16.</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.
01.<style type="text/css" media="all">02.#filme {03. position:relative;04. z-index:2;05. margin:20px 0 20px 50px;06. }07..interruptor { 08. position:relative; 09. z-index:2;10. display:block; 11. width:120px;12. margin-top: 25px;13. }14.#mascara {15. position:fixed;16. top:0;17. right:0;18. bottom:0;19. left:0;20. height:100%;21. width:100%;22. margin:0;23. padding:0;24. background:#000;25. opacity:.75;26. filter: alpha(opacity=75);27. -moz-opacity: 0.75;28. z-index: 1;29. } 30.a.interruptor {31. font-size:14px;32. color:#fff;33. background:#98bbbd;34. text-align:center;35. } 36.a.apaga-acende {37. background:#ccc;38. color:#333;39. }40.</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.
01.<script type="text/javascript">02.$(document).ready(function(){03. $('#mascara').css('height', $(document).height()).hide();04. $('.interruptor').click(function(e) {05. e.preventDefault();06. $('#mascara').toggle();07. if ($('#mascara').is(':hidden')) {08. $(this).html('Apagar luzes').removeClass('apaga-acende');09. } else {10. $(this).html('Acender luzes').addClass('apaga-acende');11. }12. });13. 14.});15.</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 https://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