Menu com JQuery estilo Flash
Uma página com efeitos fica muito mais interessante para o visitante. E nem precisa ser um efeito elaborado, qualquer movimento, troca de imagem já adiciona uma magia. Na estrutura da página, o local mais apto para aplicar efeitos é o menu. Para ser mais exato, essa é uma região que praticamente DEVE apresentar efeitos.
A dupla javascript + css nunca foi muito boa nessa tarefa de adicionar o efeito ‘wow’. O Flash que é o rei do pedaço. O cenário começou a mudar com o lançamento da biblioteca jQuery e continua a evoluir com o surgimento de plugins.
Neste tutorial vamos explorar algumas possibilidades oferecidas pelo plugin Background-Position Animation Plugin. A grande possibilidade trazida por ele é a de animar a posição da imagem de fundo do elemento.
Veja aqui a DEMO dos exemplos práticos apresentados > Efeitos Estilo Flash Em Menu Com jQuery
Preparativos
Antes de começar a diversão precisamos construir a estrutura base dos menus, criar umas imagens e importar arquivos.
Ao todo serão necessárias quatro imagens que você pode ver abaixo. Não se preocupe em recriá-las, basta fazer o download no final do tutorial.
Também será preciso a última versão o jQuery e o plugin apresentado acima. Para fins de organização foram criados arquivos para a folha de estilo e código javascript. No final, o cabeçalho da página fica assim:
<link rel="stylesheet" type="text/css" href="estilo.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="bgplugin.js"></script>
<script type="text/javascript" src="javascript.js"></script>
A estrutura básica dos menus será:
<ul class="classe-de-estilização">
<li><a href="#">Inicial</a></li>
<li><a href="#">Empresa</a></li>
<li><a href="#">Serviços</a></li>
<li><a href="#">Contato</a></li>
</ul>
Aplicação Do Plugin
Depois de importado na página a utilização do plugin é integrada com o método animate(). Então além das tantas propriedades possíveis de animar, como a largura, tamanho da fonte, surge também a posição da imagem de fundo.
$(this).stop().animate({backgroundPosition: '0 0'});
O primeiro valor é relativo à margem esquerda, sendo negativo ele vai ainda mais para a esquerda. O segundo valor é a margem superior.
Um detalhe a ser observado é que a propriedade ‘background-position’ deve ser definida antes da aplicação do animate(). E não vale fazer isso na folha de estilo, tem que ser inline, que por sua vez pode ser feito direto no código javascript. Isso parece que ocorre devido a um bug nas versões antigas do Firefox e Internet Explorer.
Vamos para o primeiro exemplo de utilização.
Efeito Deslizante
Começamos adicionando um efeito em que a imagem de fundo desliza parte da esquerda e ocupada toda a área do item do menu. Um efeito comum em menus criados com Flash.
A estrutura HTML do menu é a que vimos anteriormente. Na estilização vou mostrar apenas o que é necessário para o funcionamento do efeito.
ul.tarja li {padding:5px; background:url(bgamarelo.gif) no-repeat 0 -400px;}
O posicionamento da imagem de fundo é feita com o background-position ao invés de usar (top, left..). Desta forma o efeito funciona como o esperado. Sendo que a posição precisa ser declarada novamente no javascript, defini-la na folha de estilo é facultativo.
O código javascript fica:
$('ul.tarja li').css({backgroundPosition: "-400px 0"}).hover(function(){
$(this).stop().animate({backgroundPosition: '0 0px', paddingLeft:'20px'});
}, function(){
$(this).stop().animate({backgroundPosition: '-400px 0', paddingLeft:0});
})
A primeira coisa a ser feita é definir o ‘background-position’. Em seguida observa-se o evento hover(), quando ocorrer, o item do menu que recebeu a seta do mouse (this) tem a imagem de fundo animada e desliza para a direita para melhorar o resultado final. O stop() é para evitar repetição descontrolada do efeito.
Na função seguinte, que entra em ação quando o mouse sai de sobre o elemento, os valores simplesmente retornam aos números anteriores ao efeito.
Para fazer o efeito em que o fundo desça ao invés de deslizar para a direita, basta uma pequena troca na folha de estilo:
ul.tarja li{ position:relative; float:left;}
E alteração dos valores no efeito:
$('ul.tarja li').css({backgroundPosition: "0 -100px"})
.hover(function(){
$(this).stop().animate({backgroundPosition: '0 0'});
}, function(){
$(this).stop().animate({backgroundPosition: '0 -100px'});
})
Transição Da Cor De Fundo
Outro efeito muito interessante, justamente por ser sutil é a alteração na cor de fundo do item. Do branco ele muda suavemente para o azul.
Primeiro é preciso criar uma imagem gradiente da cor de partida para a cor final. Neste tutorial vamos usar do branco para o azul.
ul.transicao li{background:url(transicao.gif) repeat-x; padding:10px;}
Definida a imagem de fundo, basta escrever o código javascript, que é semelhante ao feito no outro efeito.
$('ul.transicao li').css({backgroundPosition: "0 0"})
.hover(function(){
$(this).stop().animate({backgroundPosition: '0px -150px'});
}, function(){
$(this).stop().animate({backgroundPosition: '0 0'});
})
A imagem de fundo simplesmente desliza e assim é atingido o objetivo do efeito. Simples e rápido.
Definindo Mais De Uma Posição
O plugin permite que seja definido mais de um valor para o background-position. Eles são então executados na sequencia em que são escritos. Isso abre uma gama de possibilidades. Vamos a uma delas.
Uma descrição do efeito desejado: A estrela surge no topo, faz um movimento diagonal para a direita, e como se batesse em uma parede, finaliza o movimento no meio do espaço disponível, logo acima do item do menu.
ul.estrela li {float:left; position:relative; margin-right:30px; padding:50px 10px 0 10px; background:url(estrela-bg.png) no-repeat;}
Os itens do menu são flutuados à esquerda com margem para criar distância, um espaçamento superior para que o movimento de descida da estrela fique visível, e a imagem de fundo.
$('ul.estrela li').css({backgroundPosition: "-10px -60px"})
.hover(function(){
$(this).stop().animate({backgroundPosition: '0px -30px'},200).animate({backgroundPosition: '-10px -20px'},200);
}, function(){
$(this).stop().animate({backgroundPosition: '-10px -60px'});
})
A imagem de fundo é posicionada e se o mouse passar ou parar sobre o elemento começa a ação. O encadeamento ocorre pela adição do ponto entre os métodos animate(). E pronto, temos um efeito.
Conclusão
A simplicidade na aplicação do efeito é incrível. E usando a imaginação é possível criar efeitos bastante interessantes. Nos arquivos para download existem mais algumas variantes dos menus mostrados aqui.
Fonte: Webmaster
