Efeitos Estilo Flash Em Menu Com jQuery

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.