TidBits

Ultimamente tenho visto scrips interessantes em javascript simulando aquele efeito muito comum no flash o qual chamamos de parallax.

No dhteumeuleu, no CSSLab e no Stephband tem exemplos bem legais e bem complexos dessa técnica.

E essa semana, fazendo um freela, precisei criar algo nesse estilo. E acabei criando um script BEM SIMPLES que simula core do efeito.

Veja o exemplo abaixo e passe o mouse em cima:

Vou explicar como fiz:

O HTML:

<div id="container">
	<div id="conteudo">
		<img src="_images/parallax.jpg" alt="Parallax"/>
	</div>
</div>

O CSS:

	#container { width: 460px; height: 304px; position: relative; overflow:hidden; }
	#conteudo { position: absolute; left:0; top:0; }

E o javascript (usando jQuery):

$(window).load(function(){
	if($('#conteudo').width()>$('#container').width()){
		var pos_x = $('#conteudo').offset().left;
		var container = $('#container').width();
		var conteudo = $('#conteudo').width();
		var diferenca = conteudo - container;
		var metade = - parseInt(diferenca / 2);
		$('#container').mousemove(function(e){
			x = e.pageX - pos_x;
			porcentagemX = parseInt(x / container * 100);
			left = parseInt(0 - (diferenca  / 100 * porcentagemX ));
			$('#conteudo').css('left',left);
		});
		$('#conteudo').animate({ 'left':metade },1000);
	}
});

Vou explicar basicamente o que o script faz, linha a linha.

1 – Faz com que a função seja executada quando terminar de carregar a página;

2 – Verifica se a área do conteúdo é maior do que a do container pra poder aplicar o efeito;

4 a 8 – Declara variáveis com os valores dos elementos;

10 – Escreve uma função que será executada toda que passar o mouse em cima do elemento “container”;

11 e 12 – Obtem a posicao do mouse (em porcentagem) em relação a div “container”, elemplo, se o mouse tiver bem no meio do container, a posicao é de 50%, mas se o mouse tiver bem na direita do container então a posição será próxima a 100%;

13 e 14 – Com a porcentagem obtida, é só posicionar o left do conteudo. O conteúdo não precisa ser uma imagem, pode ter quaisquer elementos dentro.

17 – Para o usuário perceber o efeito, é legal centralizar o conteúdo, usando o animate do jQuery já mostra o movimento.

Apesar do exemplo bobo aqui nesse post, esse script da liberdade pra fazer efeitos mais complexos. È mais facil trabalhar em cima dessa base do que usar um plugin de jQuery com mil opções.

Pra quem achou legal, pode fazer o download do exemplo completo.

Recentemente a Yahoo! lanço o BOSS (Build your Own Search Service), para concorrer diretamente com o Google Custom Search Engine. Ambos são mecanismos de buscas que procuram dentro de páginas ou domínios configurado por você. Aqui eu vou falar do Google Custom Search Engine que parece ser mais simples.

Me apresentaram o Google Custom Search Engine lá no Google Search Masters 2008 e deram bons motivos para nos pensar em utilizá-lo, como:

• Fazer uma busca em todo o seu site, pode ser complexo, gastar horas e horas de programação, no mecanismo deles eu fiz em 5 minutos.
• O algoritmo de buscas é o mesmo que o google usa, então, ele consegue definir níveis de príoridade (ranking), por exemplo se nós procurarmos javascript, o algorítimo procura qual a relevância da keyword javascript dentro de cada página. E depois ele apresenta qual tem o resultado mais relevante. O que seria é mais complicado ainda.
• Os usuários estão acostumados a interface do google.
• É possível mesclar o conteúdo com links patrocinados e, quem sabe, ganhar dinheiro com isso.

Faça o teste aqui com o nosso mecanismo de busca que eu acabei de criar.

Procure por modal, javascipt, jQuery, ou o que quiser.

É lógico que tem desvantagens, acaba com o layout do seu site, e pra quem usa CMS como wordpress, joomla, drupal, etc.. etc… não dá trabalho nenhum criar uma busca. Mas pra quem não usa, ou se seu cliente quer um projeto “bom, rápido e barato”, vale a pena experimentar, até a w3c schools usa.

Teste seus conhecimentos em JavaScript respondendo o quiz. Todas as perguntas e respostas estão em português.

Não deixe de comentar quantos pontos você fez e o que achou das perguntas.

E pra quem ainda não fez, também tem o Quiz de CSS , o Quiz de XHTML e o Quiz de jQuery .

[]s

Eu sempre fico impressionado com as scripts do dhteumeuleu . Tanto pelo bom trabalho, quanto pela criatividade. E recentemente ele fez (ou eles fizeram?) mais um projeto bem legal, trata-se de uma animação de texto em javascript chamada de “mistakes”. Deem uma olhada abaixo:

No exemplo original, o texto fica dentro de um textarea, mas facilmente dá pra alterar isso, deixar do jeito que você quiser, dentro de um <h1> por exemplo, assim o código fica acessível pra search engines e pra quem não tem javascript.

Quem gostou, pode fazer o download do exemplo original ou então acessar o site do dhteumeuleu . Quem puder contribuir com paypal no site dele, o cara merece. =)