Muitos me perguntaram como fiz o efeito de terremoto na brincadeira de 1º de Abril (sim era uma brincadeira caso você tenha acreditado =P )

Alguns até me perguntaram se era um plugin de Word Press.

Não, tudo feito na unha =), ou quase pois usei o auxílio do JQuery

Importando o JQuery

Bom, se você utiliza um site feito por você mesmo, para usar o JQuery basta utilizar as seguintes linhas no cabeçalho do site:

https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

Outra forma é baixar do site do JQuery da página de download e referenciar pro seu próprio servidor em vez do servidor do Google (exemplo acima).

E se eu realmente uso WordPress?

NÃO ENTRE EM PÂNICO!!! O JQuery é muito popular entre os desenvolvedores de sites, e óbviamente o WordPress faz uso dele. Para utilizar o jquery no WP ou você altera o header do teu site incluindo o script acima. OU você faz uso do JQuery que já está nativo no WP como ensina o site Tudo Para WordPress.

Tá, importei o JQuery e agora?

O resto vai depender da importação de plugins, alguns criados por mim e outros não.

• Animate CSS Rotation and Scale


• CSS Transform


• Broken (plugin meu mas pode usar a vontade, licença Creative Commons do Taulukko)


• Shake (plugin meu mas pode usar a vontade, licença Creative Commons do Taulukko)

A tua tag head vai ficar +ou- assim :

     
                        http://js/jquery-1.5.js
			http://js/jquery-css-transform.js			
			http://js/jquery-animate-css-rotate-scale.js
			http://js/jquery-broken.js
			http://js/jquery-shake.js
     

Pronto, está feito a importação das bibliotecas que você vai usar não somente pra fazer o efeito de terremoto como pra outras coisas em seu site. Ok e pra fazer o tal de terremoto agora que já importei as bibliotecas?

O terremoto

Bom, chega de conversa fiada e vamos à mágica.

			
			
				if( $.browser.msie)
				{

					$(document).ready(
						function ()
						{
							$('body').shake();
							$('#menuTop').broken();
						}
					);
				}
			

Reparem que primeiro eu fiz o comando shake na tag body e depois fiz o comando broken (que quebra o elemento com efeito de gravidade) no elemento com id menuTop , veja parte do meu código pra entender o que é um id:

...

Por padrão ele quebra o elemento a esquerda, funciona com menus ( UL ), divs ou qualquer elemento que tenha posição absoluta na tela (creio que não absoluto também mas ai é bom testar). E se quiser quebrar a direita?

	$('#quickLogin').broken({fixed:"right"});

Espero que tenham curtido, abaixo um zip com um demo =)