Efecto de fundido en los enlaces

Anteriormente explicaba como se hacía un efecto de fundido en la página principal de blogger. Y hoy voy a decir como se hace el marco donde están los enlaces.

Mostrar resto >>

<< Ocultar resto
El efecto de fundido es el mismo que el explicado en la entrada anterior, salvo el hecho de que el color inicial y el final se pasan por parámetros y no mediante variables globales y que se incluye un parámetro para saber en que fase de la animación me encuentro y poder llevar un control.
Es necesario disponer de un DIV que funciona como contenedor de otros DIV que son los que contienen los enlaces y que son los que se moverán para arriba o para abajo. Vuelvo a recordar que el motivo de que exista una capa contenedora es porque se le pone el estilo position: relative para que luego las capas que se hayan dentro se puedan mover gracias al estilo position: absolute.

Contenedor

Enlace 1

Enlace 2

Enlace 3

Se van a repetir sucesivamente cuatro fases en la realización de este efecto:

• Hacer fundido hasta el 30%
• Mover el enlace superior a la parte inferior, mientras continúa el fundido y los otros dos enlaces se mueven hacia arriba
• Cambiar el enlace inferior
• Reiniciar los valores que se encuentran en el segundo enlace, este fue modificado cuando se creo y pasó del color de fondo al color de letra. Volver a empezar el proceso

Necesitaremos tres funciones nuevas, además de las ya creadas en el efecto de fundido:

• para poder mover las capas de los enlaces, las cuales en este caso está separadas 24 pixels

      // Mueve una capa hasta cierta posición     // descendentemente o ascendentemente     function mover(id, pos, ascendente) {         if (pos >= 0) {             var obj = document.getElementById(id);             obj.style.zIndex = ascendente? '10':'5';             obj.style.top = (parseInt(                 obj.style.top.replace(/px/, "")) -                 (velocidadSubir*(ascendente? 1: -1))) +                 "px";                          setTimeout("mover('"+id+"', "+                 (pos-velocidadSubir)+                 ", "+ascendente+")",                 velocidadMover);         }              }

• para realizar las distintas fases de la animación

      // Lleva a cabo la animacion de las     // capas que contienen los enlaces     // en 4 fases. Cada fase, menos la     // primera, debe esperar hasta que     // acaba la anterior     function animarEnlaces(i) {         if (i == 1) {             // Fase 1: el div superior lo             // difumino hasta un 30%             fundido("enlace"+                 divEnlaces[(indice+0) % divEnlaces.length]                 , 30, colorFondo, 1);             // Lanzo la siguiente fase             animarEnlaces(2);         } else if (i == 2) {             // No se ejecuta hasta que             // la fase anterior no haya acabado             if (!continuar[1]) {                 setTimeout("animarEnlaces(2)", 10);             } else {                 // Muevo la capa superior hacia abajo                 // y las otras hacia arriba, mientras hago                 // un fundido de la capa que baja el                 // resto que no se realizó                 continuar[2] = false;                 mover("enlace"+                     divEnlaces[(indice+0) %                     divEnlaces.length],                     46, false);                 mover("enlace"+                     divEnlaces[(indice+1) %                     divEnlaces.length],                     23, true);                 mover("enlace"+                     divEnlaces[(indice+2) %                     divEnlaces.length],                     23, true);                 fundido("enlace"+divEnlaces[(indice+0)%divEnlaces.length],                     70, colorFondo, 2);                 // Lanzo la siguiente fase                 animarEnlaces(3);             }         } else if (i == 3) {             // No se ejecuta hasta que             // la fase anterior no haya acabado             if (!continuar[2]) {                 setTimeout("animarEnlaces(3)", 10);             } else {                 continuar[3] = false;                 // Cambio el enlace de la última                 // capa para que aparezca el siguiente                 // de la lista y pongo valores por                 // defecto.                 // Hago que aparezca haciendo un                 // fundido del color de fondo al color                 // de la letra                 var obj = document.getElementById(                     "enlace"+                     divEnlaces[(indice+0) %                     divEnlaces.length]);                 obj.innerHTML = '<a href="'+                     enlaces[posEnlace][0]+                     '" porc="30" style="color: '+                     colorFondo + '">'+                     enlaces[posEnlace][1]+                     '</a>';                 for (var i=0; i<obj.childNodes.length;                     i++) {                     obj.childNodes[i].setAttribute("color-texto",                         RGBdecimal(obj.childNodes[i].style.color));                     obj.childNodes[i].setAttribute("porc",                         "100");                 }                                  posEnlace = (posEnlace+1) %                     enlaces.length;                 fundido("enlace"+                     divEnlaces[(indice+0)%divEnlaces.length],                     100,                     '#315C7C',                     3);                 indice++;                 animarEnlaces(4);             }         } else if (i == 4) {             // No se ejecuta hasta que             // la fase anterior no haya acabado             if (!continuar[2]) {                 setTimeout("animarEnlaces(3)", 10);             } else {                 var obj = document.getElementById(                     "enlace"+                     divEnlaces[(indice+1)                     % divEnlaces.length]);                 for (var i=0; i<obj.childNodes.length;                     i++) {                     obj.childNodes[i].setAttribute("porc",                     "100");                     obj.childNodes[i].setAttribute("color-texto",                         RGBdecimal(color));                 }                              setTimeout("animarEnlaces(1)", 1000);             }         }     }

• para la creación de los enlaces y su colocación

      // Situa las tres capas en sus posiciones     // iniciales y luego llama a inicio de la     // animación     function crearEnlaces() {         document.getElementById("enlace1").innerHTML =             '<a href="'+             enlaces[posEnlace][0]+             '" style="color: '+ color +'">'+             enlaces[posEnlace][1]+'</a>';         document.getElementById("enlace1").style.top =             "1px";         posEnlace++;         document.getElementById("enlace2").innerHTML =             '<a href="'+             enlaces[posEnlace][0]+             '" style="color: '+ color +'">'+             enlaces[posEnlace][1]+'</a>';         document.getElementById("enlace2").style.top =             "25px";         posEnlace++;         document.getElementById("enlace3").innerHTML =             '<a href="'+             enlaces[posEnlace][0]+             '" style="color: '+ color +'">'+             enlaces[posEnlace][1]+'</a>';         document.getElementById("enlace3").style.top =             "49px";         posEnlace++;                  setTimeout("animarEnlaces(1)", 200);     }

Puedes bajarte un ejemplo del código aquí: ARCHIVO