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 — 27.115 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!

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro Grid Layout   capa livro html5   capa livro css3   capa livro HTML5 e CSS3   capa livro RWD   capa livro jQuery   capa livro Bootstrap3   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro foundation   capa livro Sass e Compass

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