JQuery: Efeito de Apagar a Luz

Quer aprender a fazer este efeito, não deixe de ler este post.

Podemos ver este efeito sendo utilizado nos grandes portais, como Terra, UOL entre outros.

Segue link de demonstração: Efeito Apagar a Luz

Este post baseia-se no post original do desenvolvedor Janko Jovanovic.

Vamos ao código:

1º. Crie um arquivo index.html e insera o código abaixo:

Exemplo de como fazer um efeito de apagar a luz, usando JQuery


Apagar a luz
	

linha 5: chamada da biblioteca jquery
linha 8: $(‘#opacidade’).css(‘height’, $(document).height()).hide(); – esta linha de comando permite obter a altura total da janela do navegador e torná-la em oculto (hide).
linha 9: quando clicar no botão é chamado a função que fará a alternância do efeito (on/off).
linha 10: .toogle() permite a alternância; o elemento que estava invisível passa a ser visível.
linha 12: condição if que verifica se é para apagar ou acender as luzes.

linha 25: foi colocado uma imagem para representar um vídeo, porém você deve substituir pelo código de chamada do vídeo. ex: no youtube copie o código da caixa de texto incorporar e cole dentro das tags div.

linha 28: este div é utilizado para dar o efeito desejado; a grande sacada está na definição das regras css.

2º. Crie um arquivo de nome estilo.css que conterá a formatação de estilos.

body{
        background-color:#ffffff;
        font-family:Arial, Helvetica, sans-serif}

#botao{
	background-color:#666666;
	color:#FFFFFF;
	cursor:pointer;
	width:250px;
	position:relative;
	display:block;
	z-index:999
}

#filme{
	width:250px;
	height:250px;
	margin:0 auto;
	border:#000000 2px solid;
	padding:0;
	position:relative;
	display:block;
	z-index:999
}    

#opacidade {
	position:fixed;
	top:0; right:0; bottom:0; left:0;
	margin:0; padding:0;
	background:#000;
	opacity:.80;
	filter: alpha(opacity=80);
	-moz-opacity: 0.80;
	z-index: 1;
}

– Para o efeito funcionar corretamente, o importante são as declarações position e z-index e as regras CSS para a div#opacidade.

Até a próxima!