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
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:
- Intercambiar colores de texto y fondo (4º párametro true, 5º true):
ver efecto
- Ocultar aplicando el efecto al fondo (4º párametro true, 5º false):
ver efecto
- Ocultar aplicando el efecto al texto (4º párametro false, 5º true):
ver efecto
- Mostrar aplicando el efecto al fondo (4º párametro true, 5º false):
ver efecto
- Mostrar aplicando el efecto al texto (4º párametro false, 5º true):
ver efecto
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
