Por André Lima - www.apici.com.br
em 26/11/2010
Olá Pessoal,
Recentemente o twiter lançou sua nova identidade, muito bonita por sinal.
Algo bastante inovador que atraiu a atenção de designers e programadores do mundo todo foi o menu deslizante com o efeito de “fade-in e fade-out” em sua página principal, aquele dos “Trending Topics”.
O efeito lembra aquele antigo MARQUEE do HTML, mas com um toque muito mais fino e delicado.
Afinal o mesmo foi desenvolvido em Jquery.
Deparei-me recentemente com a necessidade de desenvolver um para meu cliente e fui à busca de exemplos na rede..
Pasmem, não encontrei nada concreto e o mais próximo que se acha não funciona com marcadores.
Há outras maneiras de fazê-lo, mas aqui descreverei como fazer um idêntico utilizando as mesmas técnicas do Twitter:
Em nosso exemplo, utilizaremos "UL e LI" como no Twitter
Vejamos por Etapa:
Etapa 1 - Imagem de Fade-in:
Crie uma imagem para utilizarmos como fade-in.
Abaixo está disponível a que utilizei no meu exemplo:
