Terremoto

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:


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.

A tua tag head vai ficar +ou- assim :

     
                        
						
			
			
			
     

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.

			

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 =)

Post a Comment

Your email is never shared. Required fields are marked *

*
*