Li - Scroll Fade Marquee - Desenvolvendo o menu deslizante do Twitter com JQUERY

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:

 

Etapa 2 - O código CSS:

    #MenuLocal { float: right; margin-top: -6px; width: 831px; margin-top:50px;}
	
	.sub li a { float: left; padding: 9px 5px 10px 10px; text-decoration:none;}
	.sub {  color: #66aacc; height: 29px;}
	.sub a { color: #66aacc; font: 13px/11px Arial; }
	
	div#SubMenuLocais {
	  position:relative;
	  overflow:hidden;
	  background: url(imagens/menu_repeat.png) repeat-x;
	  width:601px;
	  float:left;
	  height:29px;
	}
	
	div#SubMenuLocais div.SubFull {
	  position:relative;
	  display:inline;
	  white-space:nowrap;
	  float:left;
	}
	
	div#SubMenuLocais div.fade {
	  width:40px;
	  position:absolute;
	  background:url(imagens/marquee-fade.png) repeat-y scroll -20px 0 transparent;
	  top:0;
	  left:0;
	  height: 29px;
	}
	div#SubMenuLocais div.fade.left {
	  background-position:-106px 0;
	  left:auto;
	  right:0;
	}
	
	#MenuLocal .title_other { position:relative;}
	#MenuLocal .title_other .bg_rpt2{
		width:115px;
		position:absolute;
		top:0;
		left:auto;
		right:0;
	}
    

Etapa 3 - O Código JavaScript:

    var MenuLocais = function(j) {
	var ret = this;
	var jTarget = j;
	var strText = $(".sub").html();
	
	var PaddingLeft = 50;
	var ObjConteudo,ObjConteudo2,TextWidth;
	
	var AtualizaPos = function() {
		PaddingLeft -= 1;
		if (PaddingLeft < -TextWidth) {
			PaddingLeft += TextWidth;
		}
		ObjConteudo.css({'left':PaddingLeft + 'px'});
	};
	
	var GeraMenu = function() {
		
		ObjConteudo = $("<div class="SubFull"></div>");
		ObjConteudo2 = $("<ul class="sub"></ul>").html(strText);
		ObjConteudo.append(ObjConteudo2);
		
		jTarget
			.html("")
			.append(ObjConteudo)
			.append($('<div class="fade"></div>').html(' '))
			.append($('<div class="fade left"></div>').html(' '));
		
		TextWidth = ($(jTarget).find('.SubFull').width());
		$(jTarget).find('.SubFull').width(1601);
		ObjConteudo2.append(strText + " " + strText);
		AtualizaPos();
		
		$("li",ObjConteudo2).hover( function(){
				StopAnim();
				},
				function(){
					intervalo = setInterval(AtualizaPos,30);
					//alert('Voltou');
				});
	};
	
	var StopAnim = function(){
		//alert('Parou');
		clearInterval(intervalo);
	}
	
	GeraMenu();
	var intervalo = setInterval(AtualizaPos,30);
	return ret;
};
    
    

Etapa 4 - O código HTML:

<div id="SubMenuLocais">
            <ul class="sub">
                <li><a href="#" title="Vila Gustavo">Vila Gustavo</a></li>
                <li><a href="#" title="Cantareira">Cantareira</a></li>
                <li><a href="#" title="Carandiru">Carandiru</a></li>
                <li><a href="#" title="Vila Dom Pedro I">Vila Dom Pedro I</a></li>
                <li><a href="#" title="Jardim São Paulo">Jardim São Paulo</a></li>
                <li><a href="#" title="Jardim Santa Maria">Jardim Santa Maria</a></li>
        </ul>
      	<div class="fade"></div>
      	<div class="fade left"></div>
      </div>

Etapa 5 - Chamando a função:

    	jQuery(function($) {
            myMenuLocais = new MenuLocais($('div#SubMenuLocais'));
        });
    

Espero que tenham gostado do exemplo, até a próxima.