Animando Background

Uma das coisas mais legais no Jquery são as animações, temos vários modos de fazer animações de todos os tipos. Agora vou mostrar como animar um background, esse efeito pode ter várias aplicações bem legais vai depender de sua criatividade.

CSS

#democontainer {
    height:180px;
    width: 560px;
   background: #000 url(./demo/img/bganim.jpg) repeat-x  scroll left top;
 }

O Primeiro passo é definir o fundo do nosso contêiner, neste exemplo utilizei algo simples, mas o efeito também funciona no header do site por exemplo. Não esqueça de repetir o background horizontal com o repeat-x.

var larguraImagem 	 = 2247; // Tamanho do background
var LarguraContainer	 = 560;	  // Tamanho do container
var velocidade 	 = 1;	  // Velocidade em milisegundos
var movimentopixel	 = 1;	  // Quantos pixels movimentar a cada passo
var atual 		 = 0;	  // Pixel Atual

var reinicia = -(larguraImagem); //Quando iniciar o loop
	
	function animabackground(){
			
	atual -= movimentopixel; //Mover para o próximo pixel.
		
		if (atual == reinicia){ //Estamos no final da imagem, voltar ao inicio.
		    atual = 0;
		}
				
	$('#democontainer').css("background-position",atual+"px 0"); //Ajusta o css do fundo
	}
			
	var iniciar = setInterval("animabackground()", velocidade); //Chama a função repetidamente para mover o background

A primeira coisa a fazer é definir nossas variáveis a largura da imagem usada, a largura de nosso container a velocidade em milisegundos, quantos pixels movimentar na animação e em qual pixel começar a animação.
A variável reinicia calcula o ponto em que nossa animação deve reiniciar baseado na largura da imagem, depois a função da animação em si. Calculando a posição de nosso background temos o efeito da animação

Fique atento para não fazer a animação muito rápida e use a sua criatividade para dar um efeito muito legal em seu site. No demo mostro 2 tipos desta animação, uma comum e a outra utilizando esta animação como um fundo animado que pode por exemplo ser usado em um logotipo animado.