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!
Muito bom, aprendir mais uma com essa exelente dica.
Além de mostrar o button é preciso mostrar a figura quando se apaga a luz. Como faço isso?
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.
Excelente, aprendi mais uma.
muito bom. parabéns.
muito bom acabei colocando no meu site!
http://www.pctvonline.com.br
parabéns!
Muito legal esse efeito em jquery!
gostei muito!!
valeu!
Bom dia Tiago.
Muito legal esse post, com certeza vai me ajudar muito nos novos projetos.
Olá, Tiago. Primeiramente, parabéns pelo seu site. E em seguida, gostaria muito que você me ajudasse num passo a passo para criar este efeito de apagar a luz para meu site. Ficaria muito agradecido.
Desde já, muito obrigado. Abraços.