Pixel Fórum
Bem vindo ao Pixel Fórum. Se registre-se.
Buscar
 
 

Resultados por:
 


Rechercher Busca avançada

Conectar-se

Esqueci minha senha

Últimos assuntos
» [Tutorial] Sing Animada
Ter Jan 08, 2013 5:32 pm por Dener

» [Tutorial] Efeito C4D
Ter Jan 08, 2013 5:29 pm por Dener

» [Abertura] - Pixel !
Ter Jan 08, 2013 4:56 pm por Dener

» Quebrando as Regras
Ter Jan 08, 2013 4:07 pm por Dener

» [Servidor] Mu - Walkman
Ter Jan 08, 2013 3:57 pm por Dener

» [Distração] O que gosta de fazer
Ter Jan 08, 2013 3:19 pm por VictorV.

» [Servidor] DDtank TB
Ter Jan 08, 2013 2:27 pm por Dener

» Fun.: We Are Young ft. Janelle Monáe
Ter Jan 08, 2013 2:25 pm por Dener

» Validação Inline De Formulário
Ter Jan 08, 2013 10:48 am por 

Top dos mais postadores
VictorV.
 
Dener
 
Kreitos
 
,Burn
 

Os membros mais ativos da semana

Os membros mais ativos do mês


Menu jQuery Com Efeito Animado

Ir em baixo

Menu jQuery Com Efeito Animado

Mensagem por  em Ter Jan 08, 2013 10:47 am

Menu jQuery

Umas das possibilidades criada pelo jQuery e que eu mais gosto de explorar é a criação de animações. Pequenas funções que somadas, geram resultados impressionantes e com poucas linhas de código.

Neste tutorial vou apresentar o passo-a-passo da criação do efeito que utilizei no menu do meu portfolio.

A idéia é de que, ao passar o mouse sobre um dos itens, uma lâmpada apareça e faça um movimento até o topo da palavra, dando uma leve piscada em seguida.


Veja aqui uma Demo deste Menu com Efeito Animado

Estrutura HTML Do Menu

Iniciamos com a estrutura HTML do menu.

Código:
<ul class="menu">
            <li ><a href="#" title="inicial" >inicial</a></li>
            <li><a href="#" title="sobre">sobre</a></li>
            <li><a href="#" title="portfolio">portfolio</a></li>
            <li><a href="#" title="serviços">serviços</a></li>
            <li><a href="#" title="clientes">clientes</a></li>
            <li><a href="#" title="blog">blog</a></li>           
            <li><a href="#" title="contato">contato</a></li>
          </ul>

Aparência Dos Elementos Com CSS

Começamos a definir a aparência dos elementos com o CSS.

Código:
.menu{margin:100px 80px;}

.menu li{display:inline; font-size:2em;}

.menu li a{color:#c8edef; padding:35px 30px 0 30px; position:relative; text-decoration:none;}

.menu li a div{position:absolute; top:-40px; left:0px; width:100%; height:115px; background:url(img/light.png) no-repeat top; display:none;}

Posicionamos o bloco do menu 100px distante do topo e 80px da borda esquerda.
Em seguida definimos para os itens da lista o display:inline, que posiciona-os um ao lado do outro.

Para os links é criado um espaçamento, que além de ser responsável por uma estética mais agradável cria um espaço para receber o ícone da lâmpada. Com o position:relative, informamos que o ícone será posiciona entre as fronteiras do elemento.

A div que será criada dentro dos links é posicionada absolutamente me relação a eles. Tem uma margem superior negativa para que fique acima dos itens do menu. A largura é de 100% para que a imagem de fundo fique exatamente no meio da palavra e a altura é a da imagem de fundo. Por fim escondemos esta div com um display:none.

Como você pode ver é uma estilização simples, mas com propriedades chave sem as quais o efeito não funciona

Arquivos Javascript

Antes de tudo adicione a biblioteca jQuery no cabeçalho do arquivo HTML. Você tem duas opções. Incluir o caminho do arquivo no seu servidor ou adicionar o endereço do arquivo existente nos servidores do Google.

Se você escolher a última opção inclua a linha abaixo antes da tag head do documeto HTML:
Código:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jQuery/1.3.2/jQuery.min.js"></script>

Crie um documento javascript e salve ele como “javascript.js” e inclua o caminho até o arquivo no cabeçalho logo após a linha que adiciona o jQuery. O cabeçalho deve ficar como aparece abaixo.

Código:
<link rel="stylesheet" type="text/css" href="estilo.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jQuery/1.3.2/jQuery.min.js"></script>
<script type="text/javascript" src="javascript/javascript.js"></script>

A primeira linha do arquivo javascript começa com

Código:
$(function(){

})

Selecionando O Elemento

Todo o código que precisa do jQuery será posto entre as chaves. E o código somente será executado quando a estrutura da página HTML estiver pronta. Por isso, se você quiser, pode adicionar o arquivo javascript no final da página que não haverá problemas.

Código:
$(function(){
  $('.menu li a').hover(function(){

  })
})

Observe agora como definimos para qual elemento o script deve atentar para saber quando rodar o código.

Código:
 <ul class="menu">
              <li >
<a href="#" title="inicial" >inicial</a></li>

No código HTML, somente um elemento tem a classe “menu”, então partimos deste elemento e fazemos o caminho passando pelo até chegar ao link que é o nosso objetivo.

Conhecer o código da página é vital para que você não precise criar ids para todo elemento que precisar de um código javascript.

Como o jQuery permite selecionar elementos a partir da classe, o código fica limpo e bem estruturado.

O hover funciona da mesma maneira que no CSS. Define o que acontecerá quando o usuário passe a seta do mouse sobre um link do menu.

Anexando A div Ao Código

Código:
$('.menu li a').hover(function()
  {
  $('.menu li a')
  .stop()
  .fadeTo("fast",0.5); 
  var bubble = "<div></div>";
  $(this).append(bubble)
  })

Ao passar o mouse sobre o link, toda animação que estiver rodando neste ou em outros links do menu (‘.menu li a’), será parada utilizando stop().

Com isso nós evitamos o problema de uma animação continuar acontecendo mesmo depois o evento desencadeador ter acontecido há tempos.

O jQuery oferece a possibilidade de encadear comandos. Por isso, depois do stop(), já aplicamos o fadeTo(), sem precisar informar que deve ser aplicado aos links do menu.
Após alterarmos a opacidade de todos os itens, criamos uma variável que contém um trecho de código HTML.

Na linha abaixo, o $(this) faz referência ao elemento que recebeu a seta do mouse (hover). Nesse link é anexada a div. Você não verá o resultado disso no código da página, mas a título de ilustração, fica assim:

Código:
<li >
<a href="#" title="inicial" ><div></div>inicial</a>
</li>

Essa é a div que contém a imagem da lâmpada no fundo. A esta altura do código ela somente foi anexada ao link, mas não é visível porque no código CSS definimos display:none para toda div que estivesse dentro de um link contido no menu.

Mostrando E Animando A Imagem

Agora que a div com a imagem faz parte do código vamos providenciar para que ela seja mostrada. A idéia é de que ela apareça, faça um leve movimento para cima, e pisque.

Código:
  $(this).append(bubble)
  .fadeTo("fast",1)
  .children('div').animate({opacity: "show", top: "-50"}, "slow")
  .fadeTo("fast",0.8)
  .fadeTo("fast",1);

Lembra que definimos que a opacidade dos links fique em 0.5? Pois agora, o link que recebeu a seta do mouse volta à opacidade normal com o fadeTo().

Chega o momento de animar a div que anexamos ao código. Como chegar a ela? No HTML, existe uma hierarquia, com nós, elementos pai e filho entre outros. A div que criamos, esta dentro do link que recebeu a seta do mouse, sendo assim ela é considerada filha deste elemento.

O jQuery possibilita o acesso a esta div usando o children(). Com isso também mudamos o foco do código, que agora passa a aplicar os efeitos nesta div. Por isso o animate() que vem em seguida, não será aplicado sobre o item do menu e sim sobre a div.

A função animate() oferece um grande número de opções que podem ser potencializadas encadeando a alteração nas propriedades. No caso da nossa animação são alteradas duas propriedades, a opacidade, para mostrar a div oculta e a distância em relação ao topo, que cria o movimento. E um último parâmetro que torna a execução lenta (slow).

Quando a lâmpada já estiver no lugar, encadeamos dois fadeTo() para criar um leve efeito onde ela pisca. E esta finalizada a primeira parte.

Código:
$('.menu li a').hover(function()
  {
  $('.menu li a')
  .stop()
  .fadeTo("fast",0.5);         
  var bubble = "<div></div>";
  $(this).append(bubble)
  .fadeTo("fast",1)
  .children('div').animate({opacity: "show", top: "-50"}, "slow")
  .fadeTo("fast",0.8)
  .fadeTo("fast",1);
  }

Revertendo A Animação

Quando a seta do mouse sair de sobre o link, a imagem tem que desaparecer e os outros itens do menu voltar a opacidade normal. Novamente vamos aproveitar a possibilidade de encadear as ações para tornar o código mais limpo.

O método hover() possibilita que você determine o que acontece quando a seta do mouse estiver sobre o elemento e quando ela mudar o foco em apenas uma declaração.

Código:
$('.menu li a').hover(function()
{
  // código para quando o mouse estiver sobre o elemento
}, function() {
  // código para quando o mouse estiver sair de sobre o elemento
}
)

Vamos fazer a segunda parte deste código.

Código:
  ,function()
  {
    $(this)
    .children('div')
    .animate({top: "-40", opacity: "hide"}, "slow");
    $('.menu li a')
    .stop()
    .fadeTo("fast",1); 
  }

Quando fechamos a chave da primeira função, retornamos o foco do código para o link do menu, e é a ele que nos referimos ao utilizar o $(this) agora. Utilizando o children() encontramos a div que foi animada e esta dentro do link. Com a função animate() a div é escondida e a posição alterada para baixo. Completado isso, a div é removida do HTML com o remove().

São selecionados todos os links do menu, é parada qualquer animação que estiver acontecendo com eles usando o stop(), e a opacidade retorna ao normal com o fadeTo().

Funcionando No IE

Ao rodar o código feito até aqui nos navegadores modernos, ele vai funcionar perfeitamente, menos no Internet Explorer…

O problema do IE é não animar corretamente quando aplicamos efeitos de opacidade, que foi o que fizemos com o fadeTo(). Se você testar nele, verá que é criado um fundo preto na imagem até ela ter a opacidade 1.

Eu gostei muito do efeito e decidi que não deixaria de utilizá-lo somente porque o IE não oferece suporte. Então vamos a solução

jQuery.support

Esta coleção de propriedades criada com o jQuery 1.3 serve para filtrar os navegadores baseada nas diferenças e bugs de cada um. No final das contas é uma maneira de saber quando isolar o IE.

Neste caso, vamos usar o jQuery.support.opacity, que vai rodar o código somente nos navegadores que interpretam corretamente a propriedade opacity. Que não é o caso do IE, que usa o alpha filter.

Na primeira parte do código vamos criar uma declaração condicional. Se o navegador suporta opacity, rodamos o código completo, do contrário são retirados alguns efeitos, mas a animação ainda acontece.

Código:
if (jQuery.support.opacity)
{
$(this).append(bubble)
  .fadeTo("fast",1)
  .children('div').animate({opacity: "show", top: "-50"}, "slow")
  .fadeTo("fast",0.8)
  .fadeTo("fast",1);
} else {
  $(this).append(bubble)
  .children('div')
  .animate({top: "-55"}, "slow")
  .show();
}

O mais interessante nesta abordagem do jQuery.support é de que, se em alguma versão futura o IE suportar a propriedade opacity o código completo vai rodar sem que você precise alterar o código.

Créditos WebMaster


Pontos Pontos : 0
Data de inscrição Data de inscrição : 01/01/1970

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum