Efeito de brilho com jQuery
Autor: Victor Adriel de J. Oliveira | Publicado: 2011-10-12T23:18:00-03:00

A intenção é criar um efeito semelhante ao das abas do Chrome ou da barra de ferramentas do Windows 7, no qual um brilho se move sobre o botão acompanhando o cursor. Seguindo esse tutorial, nosso resultado será esse:


Vamos lá. O primeiro passo é baixar a biblioteca jQuery e ligá-la ao documento HTML. Se você não sabe como fazer eu já postei aqui no blog (Utilizando o jQuery). No nosso arquivo HTML nós teremos dois elementos div para cada botão, um para o botão em si (a depender da implementação pode ser um item de uma lista) e outro para o brilho. Vamos fazer três botões, então nosso código HTML ficará assim:
&lt;html&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;head&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script type="text/javascript" src="jquery.min.js"&gt;&lt;/script&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/head&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;body&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="botao twitter"&gt;&lt;div class="brilho"&gt;&lt;/div&gt;&lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="botao orkut"&gt;&lt;div class="brilho"&gt;&lt;/div&gt;&lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="botao facebook"&gt;&lt;div class="brilho"&gt;&lt;/div&gt;&lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/body&gt;&lt;/html&gt;
Agora o CSS. Você pode baixar as imagens aki: link.&nbsp;Para o elemento com a classe 'botão': definimos altura e largura, deixamos os elementos flutuando à esquerda (dessa forma o menu aparecerá como se estivesse inline), espaçamento de 10px à esquerda, overflow: hidden para esconder a parte do brilho que exceder o espaço do botão e borda arredondada na div para que a sombra fique da mesma forma e se adeque às imagens utilizadas.
(Atenção: certifique-se de ajeitar a sombra e as bordas porque são especificas do CSS3 e portanto sensíveis à inconsistências de renderização. Para esse exemplo usei o Chrome e não me preocupei com outros navegadores).&nbsp;
Para o elemento com a classe 'brilho': definimos apenas altura e largura.&nbsp;Além disso, definimos o background de cada item. Nosso CSS ficará assim:
.botao{&nbsp;&nbsp;&nbsp;&nbsp;width:48px;&nbsp;&nbsp;&nbsp;&nbsp;height:48px;&nbsp;&nbsp;&nbsp;&nbsp;float:left;&nbsp;&nbsp;&nbsp;&nbsp;padding:0;&nbsp;&nbsp;&nbsp;&nbsp;margin-left:10px;&nbsp;&nbsp;&nbsp;&nbsp;overflow:hidden;&nbsp;&nbsp;&nbsp;&nbsp;border-radius: 8px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;box-shadow:3px 3px 5px #ddd;}.brilho{&nbsp;&nbsp;&nbsp;&nbsp;width:55px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:55px;}.twitter{&nbsp;&nbsp;&nbsp;&nbsp;background:url(images/twitter.png);}.orkut{&nbsp;&nbsp;&nbsp;&nbsp;background:url(images/orkut.png);}.facebook{&nbsp;&nbsp;&nbsp;&nbsp;background:url(images/facebook.png);}
Por fim, o JavaScript utilizando jQuery. É nesse momento que adicionaremos a imagem do brilho ao elemento de classe 'brilho', para que não seja obstrutivo. Ou seja, caso o JavaScript não funcione não haverá o efeito, mas o menu continuará usável. Quando o mouse se mover sobre o botão o brilho aparecerá com uma margem à esquerda equivalente à distância do cursor subtraída da distância do botão, ambas&nbsp;a partir da borda esquerda do navegador. Para colocar a imagem exatamente no centro do cursor basta subtrair o valor anterior da metade do tamanho da imagem usada como brilho. Definimos a margem superior num processo semelhante. Ocultamos a imagem do brilho através do JavaScript e permitimos que ela apareça apenas quando o cursor estiver sobre o botão e torne a desaparecer caso contrário. Desse forma nosso código ficará assim:
$(document).ready(function() {&nbsp;&nbsp;&nbsp;&nbsp;var half = 27;&nbsp;// Metade do tamanho da imagem &nbsp;&nbsp;&nbsp;&nbsp;var pos; // Posição do botão&nbsp;&nbsp;&nbsp;&nbsp;$(".brilho").css("background","url(images/light.png)").hide();
&nbsp;&nbsp;&nbsp;&nbsp;$(".botao").mousemove(function(mouse){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pos = $(this).offset();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).find(".brilho").show();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(".brilho").css("margin-left",mouse.pageX - half - pos.left);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(".brilho").css("margin-top",mouse.pageY - half - pos.top);&nbsp;&nbsp;&nbsp;&nbsp;}).mouseout(function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(".brilho").hide();&nbsp;&nbsp;&nbsp;&nbsp;});});

Nosso efeito está pronto. Veja o resultado: Demo.Você pode substituir o show/hide do jQuery por fadeIn/fadeOut se quiser suavizar o efeito. Além disso a imagem que você criar para o brilho fará a diferença, essa que usei fiz às pressas.&nbsp;
É isso aí, espero que tenham gostado.