tadarank afiliados

14 dezembro, 2007

Animação para div aparecer gradativamente (alterando dimensões)

Hopa.

Que tal ao invés de usar simplesmente o velho "display: block" pra deixar determinada div visível, usar uma animaçãozinha pra dar um efeito especial melhor no seu site.

Veja aqui um exemplo.

Este tipo de coisa está disponível em todo framework javascript que se preze. Mas se você não tá afim de mexer com frameworks, é só adicionar a função abaixo na sua biblioteca:

function aparece(quem,speed){
    //Aparece o 'quem' gradativamente na velocidade especificada em speed (high, normal, slow)
    //by Micox - http://www.elmicox.com/2007/animacao-para-div-aparecer-gradativamente/
    
    if(typeof(quem)=='string'){
        quem = document.getElementById(quem);
    }
    if(typeof(window['micoxApareceGradativamente'+quem.id])!='undefined'){ 
        //esta animação já está em execucao, saio
        return true
    }
     var sty = quem.style;
     sty.visibility = 'hidden'
     var pos_init = sty.position;
     sty.position = 'absolute';
     if(sty.display=='none'){ sty.display = 'block' }
     var alt_init = parseInt(quem.offsetHeight);
     var lar_init = parseInt(quem.offsetWidth);
     var over_ini = sty.overflow;
     sty.overflow = 'hidden';
     sty.visibility = 'visible';    
     sty.height = '0px';
     sty.width = '0px';
    
     if(typeof(quem.timeAparece)!='undefined'){
         clearInterval(quem.timeAparece);
     }
     quem.timeAparece=null;
    
     var loop = function(){
         var alt_atu = parseInt(sty.height);
         var lar_atu = parseInt(sty.width);
         if(alt_atu < alt_init){
             sty.height = (alt_atu + 5) + 'px';
         }
         if(lar_atu < lar_init){
             sty.width = (lar_atu + 25) + 'px';
         }
         if(alt_atu == 0 ){
             sty.position = pos_init;
         }
         if(alt_atu >= alt_init && lar_atu >= lar_init){
             //acabou
             clearInterval(quem.timeAparece);
             delete window['micoxApareceGradativamente'+quem.id];
             sty.height = (alt_init) + 'px';
             sty.width = (lar_init) + 'px';
             sty.overflow = over_ini;
         }
     }
     switch(speed){
         case 'high': speed = 1; break;
         case 'normal': speed = 20; break;
         case 'slow': speed = 40; break;
         default: speed = 10;
     }
     window['micoxApareceGradativamente'+quem.id] = true;
     quem.timeAparece = setInterval(loop,speed);
}

Exemplo de uso (passando o ID):

<span onclick='aparece("apa","slow")'>clica</span>
<div id='apa' style='display: none; border: 1px solid black;'>asdfçlaksdfçl alsjdfçlajsdçlfjaçsldjfçlajsdçflj açlsdfjksd
asdfaslçkdfjçlaj<br />aç jdfljaçsldjkfçlaskjd f<br />lça jçdfljaçsdl fjkçalsjdf çlkajsçdlf</div>

Ou passando a referencia do elemento:

<span onclick='aparece(document.getElementById("apa"),"slow")'>clica</span>
<div id='apa' style='display: none; border: 1px solid black;'>asdfçlaksdfçl alsjdfçlajsdçlfjaçsldjfçlajsdçflj açlsdfjksd
asdfaslçkdfjçlaj<br />aç jdfljaçsldjkfçlaskjd f<br />lça jçdfljaçsdl fjkçalsjdf çlkajsçdlf</div>
Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

3 comentários:

  1. Olá Micox!
    Feliz Natal!

    Primeiramente, obrigada pelas suas explicações. Há quase um ano atrás, estava penando para montar um menu vertical que funcionasse e consegui quando utilizei o código que vc tinha disponibilizado. Agora meu site funciona perfeitamente no IE, mas o menu e outras características ficam horríveis no FireFox. VC tem alguma dica para me dar? Meu site é: www.daisukidramas.com.br
    Novamente, muito obrigada. Abraços!

    ResponderExcluir
  2. Olá ukla,

    Seguinte: bom, primeiramente eu só gosto de responder dúvidas lá no fórum heheh.
    Mas vou abrir uma excessão: A parada não está funcionando pois você não seguiu corretamente como deve ser a lista ul-li. Veja novamente lá no meu tutorial como deve ser. Os ul que são filhos de LI devem ficar DENTRO da LI, o que voce não fez hehehe. Eu apenas corrigi isto e funcionou tudo 100%.

    Outro problema é sua tag 'html' que não foi fechada.

    ResponderExcluir
  3. ist nicht logisch viagra kaufen billig viagra rezeptfrei forum [url=http//t7-isis.org]levitra generika kaufen[/url]

    ResponderExcluir

Resultado! Concursos