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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Efeito Apagar a Luz - JQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('#opacidade').css('height', $(document).height()).hide();
  $('button').click(function() {
    $('#opacidade').toggle();
 
    if ($('#opacidade').is(':hidden')) {
      $('button').html('Apagar a luz');
    } else {
      $('button').html('Acender a luz');
    }
    });
});
</script>
<link href="estilo.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<p align="center">Exemplo de como fazer um efeito de apagar a luz, usando JQuery</p>
 
<div id="filme" align="center"><img src="youtube.jpg" /></div>
<p align="center"><button id="botao">Apagar a luz</button></p>
 
<div id="opacidade"></div>
</body>
</html>

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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!

8 comentários em “JQuery: Efeito de Apagar a Luz

  • 23 de julho de 2010 em 12:55
    Permalink

    Muito bom, aprendir mais uma com essa exelente dica.

    Resposta
  • 17 de dezembro de 2010 em 10:01
    Permalink

    Além de mostrar o button é preciso mostrar a figura quando se apaga a luz. Como faço isso?

    Resposta
    • 17 de dezembro de 2010 em 11:43
      Permalink

      Marcio,

      para funcionar da forma como você quer, deve incluir as seguintes linhas no arquivos css.

      #filme{


      position:relative;
      display:block;
      z-index:999
      }

      Corrigi o código no post e na aplicação de exemplo.

      Resposta
  • 19 de janeiro de 2011 em 14:48
    Permalink

    Excelente, aprendi mais uma.

    Resposta
  • 23 de setembro de 2012 em 12:31
    Permalink

    Muito legal esse efeito em jquery!
    gostei muito!!
    valeu!

    Resposta
  • 5 de outubro de 2012 em 9:49
    Permalink

    Bom dia Tiago.
    Muito legal esse post, com certeza vai me ajudar muito nos novos projetos.

    Resposta

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *