Terremoto

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:

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.

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

Deixe um comentário

Faça o login usando um destes métodos para comentar:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.