Efecto fundido (fade)


El efecto que presentamos se puede implementar a partir de los colores de texto y de fondo y el número de colores intermedios que deseemos.

Para poder usar este script debemos poner el fichero fundido.js en una carpeta del servidor y enlazarlo con una etiqueta "script" desde su atributo src, y a la vez, crear otra sección script con el código generado en el campo de texto del formulario adjunto, generado al hacer las selecciones de colores y número de pasos intermedios, y pinchando en el botón "Crear arreglo". Se pueden crear varios arreglos, pero deben renombrarse... el arreglo original se llama colores pero puede usarse cualquier otro nombre válido.

Luego debemos usar los métodos cambiaColor() y recuperaColor() para mostrar el efecto. Se puede usar al posar el ratón en algún sitio específico o mediante cualquier otro comportamiento. A continuación puede verse un sencillo ejemplo:


Vea el efecto pasando el ratón
encima de este recuadro.

Hay muchas formas de implementar un selector de colores, pero vamos a implementar uno muy sencillo con los "colores web" estándar. La paleta está formada por 216 colores que se obtienen con todas las combinaciones de los valores hexadecimales ("00", "33", "66", "99", "CC", "FF").

Un formulario de ayuda

Desde el formulario puede obtener el(los) array(s) necesario(s) para aplicar el efecto:



Selector del color para el texto


Selector del color para el fondo


Array de colores
Color del texto:
Color del fondo:
Colores intermedios:



A continuación presentamos el efecto...

Los parámetros

Los métodos que vamos a usar: cambiaColor() y recuperaColor(), deben tener 5 parámetros a saber:


colores
El array de colores (que se obtiene con el formulario adjunto)
id
El identificador "id" del elemento donde se aplica el efecto
ms
milisegundos desde un color y el siguiente
texto
El efecto se aplica al texto. Valor lógico (true/false).
fondo
El efecto se aplica al fondo. Valor lógico (true/false).

Ejemplos


Mostraremos el efecto con una serie de ejemplos con las posibilidades de uso, el más importante es el que se muestra al principio de esta página:

Para ver los detalles sobre el uso del efecto recomiendo la lectura del siguiente artículo: Efecto fundido en texto. En donde se explica detalladamente