0 Compartilhamentos 27 Views

Efeitos de animação em menus com jQuery

O jQuery trouxe aos desenvolvedores diversas facilidades na hora de implementar interações client-side. Uma delas é a opção de criar animações, com uma simples função animate conseguimos obter belos efeitos visuais.

Diria até que essa função é a melhor maneira de substituir o flash (pelo menos em menus). Pois menus em flash quebram o conceito de acessibilidade de qualquer site. O jquery acaba sendo a melhor opção de obter efeitos animados legais sem comprometer a acessibilidade.

Essa é um efeito simples q movimenta o texto com a propriedade text-indent.

XHTML:
Inicio
Portfolio
Contato

CSS:

#animation-1 li{
width: 200px;
}
#animation-1 li a {
display: block;
padding: 10px 5px;
width:190px;
background-color: #ccc
}

jQuery:

$(document).ready(function(){
$(“#animation-1 li a”).hover(
function(){
$(this).animate({ textIndent: “30px” }, 500 );
},function(){
$(this).animate({ textIndent: “0px” }, 500 );
});
});

Como pode ver é bem simples, graças ao jQuery, abaixo temos o código completo com mais exemplos, segue em anexo também o codigo completo.

Veja este código em funcionamento

Arquivos para Download:

menu.html

Você pode se interessar

DICA EXTRA: Prepare seu Currículo de Programador // Vlog #53.1
Vídeos
19 visualizações
Vídeos
19 visualizações

DICA EXTRA: Prepare seu Currículo de Programador // Vlog #53.1

Gabriel Fróes - 9 de outubro de 2017

No último vídeo do canal demos algumas dicas sobre como preparar seu currículo para uma vaga de programador mas esquecemos de uma dica super importante que falaremos nesse vídeo.

Confira os principais trailers da New York Comic Con 2017
Notícias
29 visualizações
Notícias
29 visualizações

Confira os principais trailers da New York Comic Con 2017

Carlos L. A. da Silva - 9 de outubro de 2017

Festa dos quadrinhos foi palco de trailers de mega-produções do cinema e séries de TV: Liga da Justiça, The Walking Dead e novo Círculo de Fogo. Confira!

Google teria encontrado indícios de anúncios patrocinados pelo governo russo em sua plataforma
Notícias
9 visualizações
Notícias
9 visualizações

Google teria encontrado indícios de anúncios patrocinados pelo governo russo em sua plataforma

Carlos L. A. da Silva - 9 de outubro de 2017

Segundo o jornal The Washington Post, empresa teria começado sua investigação depois de casos similares no Twitter e no Facebook.

Deixe um Comentário

Your email address will not be published.

Mais publicações

Executivo da Microsoft confirma desinteresse no Windows Phone
Notícias
28 visualizações
28 visualizações

Executivo da Microsoft confirma desinteresse no Windows Phone

Carlos L. A. da Silva - 9 de outubro de 2017
Elon Musk critica Google Clips
Notícias
49 visualizações
49 visualizações

Elon Musk critica Google Clips

Carlos L. A. da Silva - 9 de outubro de 2017
Michel Temer vetou emenda que poderia censurar a internet
Notícias
26 visualizações
26 visualizações

Michel Temer vetou emenda que poderia censurar a internet

Carlos L. A. da Silva - 9 de outubro de 2017