display: NONE: Efecto de fundido

Un efecto que me ha gustado de Blogger, es ver como el texto se desvanece, hace un fundido al color del fondo. No me he puesto a mirar como lo hace, pero es algo sencillo, tan solo hay que cambiar tres colores progresivamente de un estado inicial a otro final:

el color de texto (color),
el color de fondo (background-color),
el color de los bordes (border-color)

Imagen simulación

Mostrar resto >>

<< Ocultar resto
Lo importante es calcular cuales son los colores intermedios entre el color inicial y el color final. Para ello trabajamos en RGB (como siempre se debería trabajar en HTML), pero no en hexadecimal, sino en decimal, para facilitar su uso.
Debemos tratar con cada componente (R, G, B) por separado porque cada cual es independiente. Para ello, primero calculamos la diferencia que hay en cada componente RGB entre el color final y el color inicial y se lo vamos añadiendo al color inicial. Por ejemplo, tenemos los dos colores predominantes de este blog: azul (#315C7C o rgb(49, 92, 124)) y el amarillo (#FFF3C9 o rgb(255, 243, 201)), la diferencia entre ambos será (206, 151, 77), esta diferencia la tendremos que dividir en varias partes iguales (por ejemplo 4), lo que nos daría (51.5, 37.75, 19.25) y se iremos sumando progresivamente al color inicial rgb(49, 92, 124).


rgb(49, 92, 124)	rgb(100, 128, 143)	rgb(152, 167, 162)	rgb(203, 205, 182)	rgb(255, 243, 201)

El resto que nos queda es sencillo, deberemos tratar de transformar los colores del objeto HTML que queremos (y de sus hijos, por si estos tienen distintos estilos). Para ello necesitaremos las siguientes funciones:

una función que nos devuelva el valor RGB en formato decimal [rgb(r, g, b)]
// Devuelve el valor rgb(n, n, n) de un // código RGB con formato #RRGGBB function RGBdecimal(rgb) { // Si es del tipo rgb(n, n, n) devuelve lo mismo, // en caso contrario lo transforma // Recuerda el uso de expresiones regulares if (rgb.match( /^.*rgb$\s*\d{1,3}\s*\,\s*\d{1,3}\s*\,\s*\d{1,3}$\s*$/ )) { return rgb; } else { var aux = rgb.substring(1); var valor = "rgb("; valor += parseInt(aux.substring(0,2), 16)+","; aux = aux.substring(2); valor += parseInt(aux.substring(0,2), 16)+","; aux = aux.substring(2); valor += parseInt(aux.substring(0,2), 16)+")"; rgb = valor; } return rgb; }
una función que transforma porcentualmente un color en otro
// Transforma el color de inicio al color de fin // en un porcentaje function transformaColor(_porc, colorIni, colorFin) { var porc = 100-parseInt(_porc); // Obtiene las componentes RGB del color de inicio var iniAux = colorIni.substring( colorIni.lastIndexOf("(")+1, colorIni.lastIndexOf(")")); var coloresIni = iniAux.split(','); // Obtiene las componentes RGB del color de fin var finAux = colorFin.substring( colorFin.lastIndexOf("(")+1, colorFin.lastIndexOf(")")); var coloresFin = finAux.split(','); // Calcula la diferencia entre // las componentes RGB del // color de inicio y el de fin var diferencias = new Array(); for (var i=0; i<coloresIni.length; i++) { diferencias[i] = parseInt(coloresFin[i]) - parseInt(coloresIni[i]); } // Añado el porcentaje al // color de inicio var rgb = "rgb("; for (var i=0; i<coloresIni.length; i++) { rgb += parseInt( parseInt(coloresIni[i])+ (diferencias[i]*porc/100))+ (i==coloresIni.length-1? ")":","); } return rgb; }
una función que trate todos los hijos recursivamente
// Por cada hijo, guardo el color original // por si luego se quiere recuperar el // estilo, y empiezo a reducir los colores function tratarHijos(hijos) { for (var i=0; i<hijos.length; i++) { // Si es un elemento HTML if (hijos[i].nodeType == 1) { // La primera vez almaceno los valores if (!hijos[i].getAttribute("porc")) { hijos[i].setAttribute("porc", "100"); if (hijos[i].style.backgroundColor) { hijos[i].setAttribute("color-fondo", RGBdecimal(hijos[i].style.backgroundColor)); } if (hijos[i].style.borderColor) { hijos[i].setAttribute("color-borde", RGBdecimal(hijos[i].style.borderColor)); } // Si no hay color de texto le // ponemos por defecto negro if (!hijos[i].style.color) { hijos[i].setAttribute("color-texto", RGBdecimal(colorDefectoTexto)); } else { hijos[i].setAttribute("color-texto", RGBdecimal(hijos[i].style.color)); } } // Obtengo el porcentaje anterior var porc = parseInt( hijos[i].getAttribute("porc")); if (porc > 0) { // Reducimos el porcentaje segun // el índice indicado porc -= indiceDifuminado; hijos[i].setAttribute("porc", porc); // Cambiamos el color de la letra hijos[i].style.color = transformaColor( porc, hijos[i].getAttribute("color-texto"), colorFinal); // Cambiamos el color de la letra if (hijos[i].style.backgroundColor) { hijos[i].style.backgroundColor = transformaColor( porc, hijos[i].getAttribute("color-fondo"), colorFinal); } if (hijos[i].style.borderColor) { hijos[i].style.borderColor = transformaColor( porc, hijos[i].getAttribute("color-borde"), colorFinal); } } tratarHijos(hijos[i].childNodes); } } }
la función principal
// Empieza la efecución del fundido function fundido(cont) { if (cont >= 0) { var obj = document.getElementById( "contenedor"); tratarHijos(obj.childNodes); setTimeout("fundido("+(cont-indiceDifuminado)+")", velocidad); } }