Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

jQuery – efeito apagar as luzes

Publicado em: 2009-07-29 — 29.661 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.

27 comentários na matéria: “jQuery – efeito apagar as luzes”

  1. Mauro ArrudaNo Gravatar disse:

    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

  2. Sidney PlayerNo Gravatar disse:

    Olá, eu gostaria de saber se é possível trocar o player do YouTube por outro

  3. ToiNo Gravatar disse:

    obrigado, funcionou!

  4. samuel.BNo Gravatar disse:

    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.

  5. PauloNo Gravatar disse:

    Tentei várias vezes fazer o código funcionar. Eu só consegui com o jquery.min.js do Google.

    Obrigado!

  6. Technology And Software » jQuery – efeito apagar as luzes | Blog do Maujor disse:

    […] http://www.maujor.com/blog/2009/07/29/efeito-apagar-as-luzes/ […]

  7. RobsonNo Gravatar disse:

    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.
    😀

  8. RobsonNo Gravatar disse:

    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.
    😀

  9. EvertonNo Gravatar disse:

    Muito bom mestre !!

  10. Box para BanheiroNo Gravatar disse:

    seu post veio na hora certa.
    muito brigadinha
    Marcia

  11. LeoNo Gravatar disse:

    porque o meu nao apaga? eu fiz certinho mais nao apaga . fica normal!

  12. Paulo SilvaNo Gravatar disse:

    Não consigo fazer isso funcionar de jeito nenhum no IE7. O z-index simplesmente não funciona. =/

  13. Fernando WebNo Gravatar disse:

    Show o efeito, tinha visto no youtube…

    Parabens!!

  14. Downloads de MúsicasNo Gravatar disse:

    Legal vc comentar sobre esse efeito, acho ele muito bacana!

  15. Mayron CachinaNo Gravatar disse:

    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

  16. Eduardo FerreiraNo Gravatar disse:

    No CHROME não funciona, mas deixa pra lá ele ainda não é um navegador!!

  17. Francisco dos SantosNo Gravatar disse:

    Maurício,

    Por desatenção, usei o código do site do janko e não o que você publicou. 🙂

    [ ]s

  18. Paulo de SouzaNo Gravatar disse:

    Muito bom! Roda no IE normal!

  19. Francisco dos SantosNo Gravatar disse:

    @medisse

    Se modificar o código, conforme sugeri, no post anterior, não ocorrerá erro no IE6. Fiz os testes usando o IETester.

    [ ]s

  20. Francisco dos SantosNo Gravatar disse:

    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.

  21. Aquecedor SolarNo Gravatar disse:

    Vlw, com certeza vou usar.
    Obrigado pela dica

    Denize

  22. meNo Gravatar disse:

    … digo, na bosta do IE 6…

  23. FredericoNo Gravatar disse:

    Muito bom! Obrigado pela dica. Estou lendo seu livro de CSS e em breve pretendo começar a estudar JQuery também.

  24. meNo Gravatar disse:

    não funciona no IE… 🙁

  25. spinelliNo Gravatar disse:

    vou utilizar juntamente com os códigos do Joomla!

    Muito bom! parabéns

  26. WellingtonNo Gravatar disse:

    Eu preciso fazer esse efeito em um projeto no trabalho, seu post veio na hora certa.

    Obrigado =D

  27. SérgioNo Gravatar disse:

    Muito legal, agora só falta a pipoca xD

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo