Últimamente he estado intentando hacer alguna animación por medio de Javascript. Si os preguntáis por qué, la razón es porque quería saber como funcionaban todas las de jQuery, por ejemplo.

Para hacerlas, además de ponerme al día con el Javascript clásico, he tenido que aprender a usar el mátodo setTimeout.

Lo que hace setTimeout es llamar a una función dentro de x tiempo, así que si usamos en una función setTimeout sobre ella misma, se irá repitiendo. Y si le pones un condicional determinado, parará cuando llegue a un momento concreto.

Supongo que será de ayuda a aquellos que no quieren usar librerías como jQuery. Por ahora llevo hechas una para mover algo hacia abajo (que no costaría hacer una para los lados), y otra para expandir y contraer elementos (con atra función para cada ejemplo).

Pues ahora que ya sabemos cómo funciona vamos con los ejemplos y el código:

Quiero aclarar que sí, sé que parece muy lento, y es que el navegador se satura mucho (ya que la página es muy grande), pero estoy intentando arreglarlo. Lo consiga o no, yo sigo recomendando una librería como jQuery o Prototype+Scriptaculous

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Click para que me mueva hacia abajo.

El script


/*********************************************************
* FUNCIONES DE MEDIDAS
*/
function alturaAuto(elem){
var id=document.getElementById(elem);
var alturaTotal=id.offsetHeight;
//Padding Top
var paddingTop=parseInt(window.getComputedStyle(id).getPropertyValue("padding-top"));
//paddingBottom
var paddingBottom=parseInt(window.getComputedStyle(id).getPropertyValue("padding-bottom"));;
//borderTop
var borderTop=parseInt(window.getComputedStyle(id).getPropertyValue("border-top"));
//borderBottom
var borderBottom=parseInt(window.getComputedStyle(id).getPropertyValue("border-bottom"));;
var altura=alturaTotal-paddingTop-paddingBottom-borderTop-borderBottom;
return altura;
}
/*********************************************************
* Animaciones
*/
/*===================================================
* Mover Abajo
*/

function abajo(elem,pix,time){
var id=document.getElementById(elem);
var top=parseInt(window.getComputedStyle(id).getPropertyValue("top"))
if (window.getComputedStyle(id).getPropertyValue("top")=="auto"){top=0;}
if( top < pix){
id.style.top=top+1+'px';
Timeout=setTimeout("abajo('"+elem+"',"+pix+")",time)
}else{
Timeout=undefined;
return false;
}
}
function moverabajo(elem,pix,tiempo){
var time=tiempo/pix;
var id=document.getElementById(elem);
var position=window.getComputedStyle(id).getPropertyValue("position");
if(position=="static"){id.style.position="relative"}
abajo(elem,pix,time);
}
/*====================================================
* Expandir
*/
function expandirAbajo(elem,altura,time){
var id=document.getElementById(elem);
if (id.style.display=="none"){
id.style.height="0px";
id.style.visibility="visible";
id.style.display="block";
id.style.overflow="hidden";
}
if (parseInt(id.style.height)<altura){
id.style.height=parseInt(id.style.height)+1+'px';
Timeout=setTimeout("expandirAbajo('"+elem+"',"+altura+","+time+")")
}else{
Timeout=undefined;
return false;
}
}
function expandir(elem,tiempo){
var id=document.getElementById(elem);
if (id.style.display!="none"&&id.style.display){return false;}
id.style.visibility="hidden";
id.style.display="block";
var altura=window.getComputedStyle(id).getPropertyValue("height");
if(altura=="auto"){altura=alturaAuto(elem)}else{altura=parseInt(altura)}
id.style.display="none";
var time=tiempo/altura;
expandirAbajo(elem,altura,time);
}
/*======================================================================
* Contraer
*/
function contraerArriba(elem,altura,time){
var id=document.getElementById(elem);
id.style.overflow="hidden";
if (parseInt(id.style.height)>0){
id.style.height=parseInt(id.style.height)-1+'px';
Timeout=setTimeout("contraerArriba('"+elem+"',"+altura+")",time);
}else{
id.style.display="none";
id.style.height=altura+'px';
Timeout=undefined;
return false;
}
}
function contraer(elem,tiempo){
var id=document.getElementById(elem);
if (id.style.display=="none"){return false;}
var altura=window.getComputedStyle(id).getPropertyValue("height");
if(altura=="auto"){altura=alturaAuto(elem)}else{altura=parseInt(altura)}
id.style.height=altura+'px';
var time=tiempo/altura;
contraerArriba(elem,altura,time);
}
/*======================================================================
* Expandir/Contraer
*/
function expandirContraer(elem,tiempo){
var id=document.getElementById(elem);
if(typeof(Timeout) != "undefined"){return false;}
if(window.getComputedStyle(id).getPropertyValue("display")=="none"){
expandir(elem,tiempo);
}else{
contraer(elem,tiempo);
}
}

Cómo usarlo

Para usarlo sólo tenéis que tener un div con una id (el que queráis animar), y otro (o él mismo) con un atributo onclick, onmouseover. Sería algo así:


<div onclick="nombreDeLaFuncion('IdDelObjetoAAnimar',píxels,Tiempo)">...Contenido del div sobre el que se va a hacer click...</div>

“nombreDeLaFuncion” tiene que ser expandir, contraer, expandirContraer o moverabajo. El valor de píxels sólo será necesario en moverabajo

Espero que os séa útil. Si tenéis alguna duda, comentad y os la resolveré lo antes posible.

Un pensamiento en “Animaciones caseras con Javascript

  1. Imagen de PedroPedro el dijo:

    Saludos emilio, he quedado fascinado con lo que has hecho llevo poco tiempo metido en esto de la web y te admiro por lo que has hecho en este post espero sigas haciendo cosas con puro javascript recien lo estoy aprendiendo y cada dia me gusta mas por todo lo que se puede hacer…

    una consulta como puedo manejar los tiempos lo he probado y no lo puedo hacer o tal vez lo este haciendo mal

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.