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



Comentarios

Nombre: oscar
Procedencia: portugal
E-Mail: confidenci@hotmail.com
Fecha de envío: 12 de septiembre de 2009, a las 01:24.
comentario:

Un aporte muy interesante. Gracias!


Nombre: aldo1982 foros del web
E-Mail: aldodamianovich@hotmail.com
Fecha de envío: 8 de febrero de 2008, a las 07:54.
comentario:

exelente lcoo..muy bueno el efcto fade ;)


Nombre: alejandro belmar, kaninox
Procedencia: chile
E-Mail: kaninos4style@gmail.com
Fecha de envío: 3 de noviembre de 2007, a las 23:08.
comentario:

Maestro este codigo es fantastico caricatos :)
gracias...


Colabore enviando su comentario

Nombre
Procedencia
Página web
E-mail *
Evaluación evaluarevaluarevaluarevaluarevaluarevaluarevaluarevaluarevaluarevaluar
Código de envío

Rellene este campo con la clave de la imagen: codigo de envío

Nota Importante

El campo E-Mail es obligatorio para activar por correo electrónico el comentario (si no desea que se haga público, marque la casilla "anonimato"). También es obligatorio el código "captcha" (el número que se ve en la imagen adjunta); y por supuesto, debe existir un comentario.

Puede encontrar información sobre este sistema de comentarios en este enlace: Ponga comentarios en su web.

Edición negrita cursiva subrayado   alineación izquierda alineación derecha alineación centrada alineación justificada   Insertar enlace insertar imagen   Emoticones: [:)] [:(] [:x] [BIEN] [MAL] [SI] [NO] [APLAUSOS] [MEJORABLE] [¡A VER!] [¡DÉJAME PENSAR!] [FLIPE] [¡SIN PALABRAS!]
Copyright © 2006-2018 www.caricatos.net
Visitas: 7185