sábado, 23 de novembro de 2013

Fazer qualquer elemento piscar com jQuery

Obrigado a todos que votaram na nossa enquete de tutoriais! Teremos mais aulas sobre as categorias mais escolhidas! Para começar um super efeito em jQuery para chamar atenção do visitante: Fazer o elemento piscar na tela. É muito usado em anúncios e avisos, entretanto, use-o com moderação pois pode poluir muito o site. Veja a demonstração AQUI.


1 - Criar elemento (imagem) com HTML e CSS

Vamos lá! Primeiramente precisamos criar o elemento no body do site. Eu vou fazer com uma imagem, mas pode ser feito com qualquer outro. Reparem no estilo atribuído a ela, principalmente em relação a transition (está dada em milissegundos).

<img src="URL-DA-IMAGEM" style="width:100px; height:auto; transition:all 100ms linear; z-index:999;" id="pisca"/>
Substitua o trecho URL-DA-IMAGEM pelo url correto da imagem. (A vá!?)
O ID do elemento também é muito importante, pois assim linkamos ele no jQuery.

2 - Código jQuery, fazendo funcionar

Agora vamos fazer com que realmente pisque. Cole o seguinte código entre <head> e </head> da sua página. Tome cuidado se você já incluiu a biblioteca jQuery anteriormente!

<script src='http://code.jquery.com/jquery-latest.js'/>//inclui biblioteca jquery
$(document).ready(function(){
$("#pisca").css("opacity","0.4");//define opacidade inicial
setInterval(function() {
       if($("#pisca").css("opacity") == 0){
$("#pisca").css("opacity","1");
}else{
$("#pisca").css("opacity","0");
} }, 100);
});
Explicando o código: basicamente, fazemos com que o elementos mude sua opacidade a cada 100 milissegundos. Se quiser mudar esse valor, mude a parte em vermelho no código. Vá alternando os valores em vermelho no jQuery e os da transition no CSS para achar a frequência do pisco que você deseja.

E está pronto! Qualquer dúvida ou sugestão comente aqui, farei o possível para te ajudar.

E se gostou, por favor compartilhe, curta e nos siga nas redes sociais, estamos sempre postando assuntos de seu interesse!

Compartilhe essa postagem!

Comentários
0 Comentários

Nenhum comentário:

Postar um comentário