Fades y efectos de color

Otro de los pequeños scripts de leigeber se llama fader y con él podemos agregar transiciones de color en los fondos, textos y bordes de los elementos. Hasta donde pude ver, funciona bien en IE, Firefox, Opera y Safari.

Descargamos este ZIP y allí encontraremos un demo y el archivo fader.js que es el único que necesitamos. Luego, lo subimos a un servidor y lo agregamos a al plantilla antes de </head>:

<script type="text/javascript" src="URL_fader.js"></script>

Aunque, como es muy pequeño y sencillo, también podemos agregarlo directamente. Para eso, también antes de </head>, escribimos el código para contenerlo, abrimos el archivo fader.js con el block de notas, copiamos su contenido y lo pegamos donde se indica:

<script type='text/javascript'>
// <![CDATA[
      // aquí pegamos el contenido del archivo
// ]]>
</script>

Para usarlo sólo necesitamos una función que agregaremos a cualquier evento como onMouseOver, onMouseOut u onClick:

colorFade('nombreID','tipo','colorInicial','colorFinal',valor1,valor2)

Donde:

nombreID es el atributo ID del elemento sobre el que vamos a efectuar el efecto
tipo es el efecto que vamos a aplicar (background, border o text)
colorInicial y colorFinal son los valores de los colores, el primero es el color con que se iniciará el efecto y el segundo con el que finalizará y deben ser escritos en hexadecimal pero sin el carácter #
valor1 es la cantidad de veces que se dividirá la diferencia de colores, un valor alto hace que se muestren muchos colores intermedios (es opcional)
valor2 es la velocidad del efecto y, cuanto más alto sea, más lento se producirá (es opcional)

Veamos un ejemplo concreto:

<div 
  style="background-color:#000000;cursor:pointer;"
  id="ejemploF1" 
  onmouseover="colorFade('ejemploF1','background','000000','FF0000')" 
  onmouseout="colorFade('ejemploF1','background','FF0000','000000',25,50)">
 ... el contenido del bloque ... 
</div>

Tengo un bloque DIV con un color de fondo negro (000000). Al pasar el cursor del mouse encima (onmouseover), el color de fondo cambia a rojo (FF0000); al quitar el cursor de encima (onmouseout) el color vuelve a ser negro y en ambos casos, esa transición se hace pasando por varios colores intermedios. Si en onmouseover no coloqué valores y onmouseout sí, sólo es para mostar que esos valores son opcionales.

... el contenido del bloque ...

Algunos ejemplos más.

Usando transiciones de color en el fondo de un DIV con el evento onmouseover; de manera similar al anterior:

EJEMPLO 1

EJEMPLO 2

EJEMPLO 3

También podemos usar el evento onClick, tanto dentro del elemento como afuera, por ejemplo, estos enlaces hacen que se produzca el efecto sobre los bloques de abajo:

Ejemplo 4 | Ejemplo 5 | Ejemplo 6

Ejemplo 4

Ejemplo 5

Ejemplo 6

En todos ellos, el tipo de efecto se produce sobre el color del fondo (background) pero, también podemos hacerlo sobre el color de los textos, en ese caso, el tipo a colocar es text:

Lorem ipsum dolor sit amet.

Consectetuer adipiscing elit.

Ut wisi enim ad minim veniam.

Y también podemos hacerlo con los bordes usando el tipo border:

EJEMPLO 10

EJEMPLO 11

EJEMPLO 12

Hasta acá son todos elementos DIV pero, puede usarse prácticamente cualquier etiqueta HTML siempre que le coloquemos un atributo ID. Por ejemplo, esta es una tabla:

Celda 1

Celda 2

Celda 3

Celda 4

Y este es un enlace a ninguna parte.