Animaciones de color con jQuery. ¡Descubre cómo!

En jQuery podemos hacer muchos tipos de animaciones a partir del método animate(), que nos sirve para variar de una manera suavizada una gran gama de propiedades CSS. De hecho, ese es uno de los métodos más importantes del día a día en la realización de efectos con jQuery, tal como se explicó en elartículo jQuery animate().

Ahora bien, no sé si os habréis dado cuenta que con animate() no podemos hacer animaciones de color, es decir, hacer un gradiente suavizado para pasar de un color a otro con una animación. Quizás nunca encontréis un inconveniente en esa carencia del framework, pero si algún día decidís hacer una animación de color, tendréis que teclear bastante código para conseguirlo por vuestra cuenta.

Sin embargo, como en muchas otras ocasiones, los plugins de terceras personas nos pueden ahorrar mucho trabajo y horas de ingeniería. En este caso comentamos una de esas joyitas que nos permitirá hacer animaciones de color directamente con el método animate() que probablemente conocerás y estés familiarizado.

El plugin de jQuery que vamos a mostraros a continuación se llama Color animation jQuery-plugin y lo puedes encontrar en la ruta: http://www.bitstorm.org/jquery/color-animation/

Uso del plugin para animar colores

Lo cierto es que hay poco que explicar sobre este plugin, pues simplemente se trata de incluirlo en las páginas y a partir de ese momento simplemente utilizar el conocido método animate(), no obstante, hacemos una descripción paso por paso sobre cómo se utilizaría.

Nota: Las propiedades CSS que podrás animar usando este plugin son las siguientes:

• color
• backgroundColor
• borderColor
• borderBottomColor
• borderLeftColor
• borderRightColor
• borderTopColor
• outlineColor

1) Incluir jQuery y el plugin 

Comenzamos por incluir los scripts del framework jQuery y del plugin para animación de colores.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.animate-colors.js" type="text/javascript"></script>

2) Crear la animación 

Ahora es tan sencillo como invocar a animate() con los parámetros necesarios, que fueron explicados en el artículo del método animate().

$("h1").animate({
   color: "#f86"
}, 3000);

Con esto estamos haciendo que los elementos H1 de la página tengan una animación que durará 3 segundos en la que pasarán del color que tuvieran definido normalmente hasta el color #f86.

Ejemplo de animación de un fondo con un patrón definido por imagen

Como hemos comprobado, no tiene mucho misterio, pero el efecto puede resultar interesante. Si tenemos un poco de creatividad todavía podemos conseguir efectos un poco más atractivos, como el que vamos a ver a continuación.

Se trata de hacer una animación de color de un fondo (atributo background-color), pero donde estamos utilizando un patrón de imagen que se repite en un mosaico. Al haber un fondo de imagen, da la sensación que la animación se realiza cambiando esa imagen, pero realmente solo está cambiando el color del fondo. Esto lo conseguimos gracias a una imagen de fondo que tiene transparencia.

Lo mejor para darse cuenta de lo que estamos haciendo es ver un ejemplo en marcha. Si hacemos clic en el titular veremos el efecto que estamos queriendo explicar.

Veamos el estilo que hemos definido para los elementos H2:

h2{
   padding: 30px;
   background-color: #ffc;
   background-image: url("fondo-h2.png");
   color: #009;
}

La imagen de fondo que hemos colocado "fondo-h2.png" es parcialmente transparente, para obtener el efecto deseado.

Ahora este pequeño código nos servirá para iluminar y oscurecer el fondo del H2 al hacer clic sobre él.

var iluminado = false;
$("h2").click(function(){
   var elem = $(this);
   if(iluminado){
      elem.animate({
         "background-color": "#ffc"
      }, 500);
   }else{
      elem.animate({
         "background-color": "#9f9"
      }, 500);
   }
   iluminado = !iluminado;
})

Como se puede comprobar, se ha utilizado una variable "iluminado" para saber cuando el elemento está encendido y cuando apagado. Luego creamos un evento click, para colocar la funcionalidad descrita. Si estaba iluminado, hago una animación del atributo background-color hacia un color y si estaba oscurecido paso el background-color hacia otro color.

El efecto no es nada del otro mundo, pero es bastante versátil y si tenéis un bonito fondo con un patrón interesante, más atractivo será el resultado.

Conclusión

Hemos visto un par de animaciones con color, creadas con jQuery y un código tan pequeño que es casi de risa. La ventaja del plugin que os hemos explicado es que no tienes que aprender nada nuevo, sino simplemente incluir su código y estarás en disposición de hacer animaciones de color, como si jQuery siempre lo hubiera soportado en su conocido método animate().

Fuente:enlace