Simulando um gif animado com javascript e css

Esta semana na empresa onde trabalho precisei atualizar o rodapé de um projeto antigo e a imagem inserida era um gif animado, porém o gif tinha um gradiente que ao salvar como gif animado ficou todo distorcido e falhado mesmo em 256 cores.

A solução foi salvar as imagens em jpg e simular o efeito do gif animado com javascript e foi muito fácil fazer com javascript puro por que o projeto não usava jquery.

Demo Download do código fonte

Vamos ao código:
[CSS]

[HTML]

Note que até aí não temos nada demais somente duas classes css .show e .hide que utilizaremos para mostrar/ocultar nossas imagens e no html somente nossas imagens com as classes iniciais já aplicadas.
[JAVASCRIPT]

window.onload = function(){  
      var Gif = function(){       
           return {   
                init : function(){  
                     var ids = ['1','2','3','4'];  
                     var aux = 1;  
                     setInterval(function(){  
                          for(var i=0; i<ids.length; i++){  
                               var img = document.getElementById(ids[i]);  
                               img.className = 'hide';  
                          }  
                          document.getElementById(aux).className = 'show';  
                          aux = (aux == 4) ? 1 : aux + 1;  
                     },1000);  
                }  
           };  
      }().init();  
 };  

Veja que na linha inicializamos nosso script javascript somente quando o DOM estiver carregado.
Na linha 2 criamos nosso objeto javascript que resolvi chamar de Gif que nos retorna o método init() que é composto de duas propriedades, uma guarda os ids das imagens e outra que nos auxiliará na manipulação do id da imagem atual.
Na linha 07 chamamos o setInterval para executar o show/hide das imagens em intervalos determinados de tempos, no meu caso de 1 em 1 segundo.
Na linha 08 fazemos um for na propriedade que guarda os ids e alteramos a classe para .hide de todas as imagens.
Na linha 12 alteramos a classe somente da imagem do id atual armazendo e iniciado em 1 na propriedade aux.
Na linha 13 dizemos que caso aux for igual 4 ela voltará a ter 1 como valor caso contrário incrementamos ela em 1.
E para finalizar na linha 17 auto-instaciamos nosso objeto com “()” e chamando o método init() com “.init()”.

Viu só com javascript foi muito fácil fazer essa simulação de gif animado, e resolvi utilizar javascript orientado a objetos por questões de gosto mesmo, mas nada impede que seja feito da forma procedual... Enfim vai do gosto de cada um.

Até a próxima.

Referências:
W3C Javascript setInterval();
W3C Javascript className

Tags: css, Javascript