Poke and Shake Effect

Oie ^-^ Há alguns posts anteriores mostrei como fazer uma animação com css que fazia com que o objeto em que fosse usado ficasse se movendo sozinho.
Hoje lhes trouxe um efeito semelhante encontrado no Ciudad Blogger que permite fazer os links moverem quando você 'cutucar' neles; por exemplo, clique na imagem ou no link abaixo:
O Efeito Shake (postado anteriormente)
Vamos lá!
Vale lembrar que este tutorial usa Prototype e Scriptaculous, que talvez entre em conflito com outros. Se você já possui em seu template, cole acima de </head> apenas as últimas 5 linhas. Visualize seu modelo para ver se está tudo ok e sempre faça backup antes.
1. Cole estes scripts acima de </head>:
<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>
<script type='text/javascript'>
function pokeshake(element){
new Effect.Shake(element);
}
</script>
2. Salve. Onde desejar usar o efeito, cole estes códigos:
Para imagens:
<div onclick="pokeshake(this);">
<a id="poke1" href="URL DE UM LINK"><img src="URL DA IMAGEM"/></a>
</div>

Para links:
<div onclick="pokeshake(this);">
<a id="poke2" href="URL">LINK</a>
</div>

Se quiser usar em mais de uma imagem ou link vá alterando os números, tipo link ou imagem 1 "poke1", link  ou imagem 2 "poke2" e assim por diante.
Espero que lhes seja útil ^-^
Créditos: Ciudad Blogger

1 Comments

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up