jQuery FadeTo – Efeito Google.com
Olá amigos, hoje vou explicar como funciona o efeito da página inicial do Google utilizando jQuery. Como todos já sabem, o jQuery é uma biblioteca Javascript que permite alterar características da página do lado cliente. Alguns exemplos são, formulários com validação sem ter que acessar outra página e páginas que dão uma resposta a um evento sem ir para uma segunda página de processamento.
Você já deve ter visto a página do Google.com com o efeito hover correto? Ainda não viu, acesse aqui -> jQuery.am-fadeto ou aqui -> google.com.
O funcionamento desse efeito é o seguinte. A página começa sem alguns elementos visíveis como: menu, rodapé, alguns links e parágrafos, deixando o banner como o único conteúdo visível na tela, reforçando a marca do produto. O que vamos fazer é um exemplo simples do funcionamento deste efeito que irá esconder alguns itens do conteúdo, o menu e o rodapé da página.
Primeiramente precisaremos da Biblioteca Javascrip jQuery. Iniciaremos com o arquivo puro, somente com o html para vocês verem que é muito simples.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Alexandre Mattos Blog - jQuery FadeTo</title>
<link rel="stylesheet" type="text/css" href="http://www.alexandremattos.com.br/exemplos/estilo.css" />
</head>
<body>
<div id="menu">
<a href="http://www.alexandremattos.com.br">Meu site</a> | <a href="http://www.alexandremattos.com.br/blog">Meu Blog</a> | <a href="http://jquery.com/">Biblioteca Javascript jQuery</a>
</div>
<div id="conteudo">
<img src="http://www.alexandremattos.com.br/exemplos/logo-amfadeto.png" alt="Logo Alexandre Mattos" />
<p>Este fade é um efeito muito interessante, usado na página inicial do <a href="http://www.google.com">Google</a></p>
</div>
<div id="rodape">
<div class="esquerda">Utilizando <a href="http://jquery.com/" title="jQuery">jQuery</a></div>
<div class="direita">Editado por: <a href="http://www.alexandremattos.com.br">Alexandre Mattos</a></div>
</div>
</body>
</html>
Como vocês podem ver o conteúdo é completamente normal, no inicio a chamada para o css, somente para formatar as id e classes do documento. Preste atenção nos nomes das ids e nas classes e elementos da página, usaremos os essas referências para o jQuery.
Agora insira entre a tag head o link para o jQuery.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
Logo após insira o efeito FadeTo nos elementos selecionados.
<script type="text/javascript">
$(document).ready(function(){
$("#menu").fadeTo("fast", 0.0);
$("#rodape").fadeTo("fast", 0.0);
$("#conteudo p").fadeTo("fast", 0.0);
$("html").hover(function(){
$("#rodape").fadeTo("slow", 1.0);
$("#menu").fadeTo("slow", 1.0);
$("#conteudo p").fadeTo("slow", 1.0);
});
});
</script>
Primeiro definimos quais elementos ficarão escondidos. Dizemos que os elementos #menu, #rodape, #conteudo p, ficarão escondidos.
Logo abaixo na linha: html hover function, significa que quando passar o mouse acima do documento html ele deve executar a função. Dentro da função definimos quais elementos ficarão visíveis. No nosso caso são os elementos que escondemos logo de início (#menu, #rodape, #conteudo p).
Abra a página e não mecha o mouse. Você perceberá que só aparecerá o logotipo.
Exemplo1 - Elementos escondidos
Quando você movimentar o mouse em cima da página, os elementos escondidos aparecerão.
Exemplo2 - Página com todos os elementos visíveis
Bem simples e você pode implementar em seu site, blog ou qualquer outra aplicação.
Demo: jQuery.am-fadeto
Clique aqui para baixar o exemplo jQuery FadeTo.
Um abraço
1 Comentário to jQuery FadeTo – Efeito Google.com
Deixar um comentário
Pesquisar no Blog
Tópicos recentes
Calendário de Posts
Arquivos
- fevereiro 2010 (1)
- dezembro 2009 (14)
Eita mlk bom!!!!