Transiciones de color animadas con jQuery

Cuando se enfrentan a implementar un nuevo diseño web, puede surgir la necesidad de agregar animaciones. Claro que siempre será mejor optar por aquellas que no irriten a quien visita el sitio, sobretodo porque es algo que tiende a cansar la vista si se tiene que observar durante un tiempo prolongado.

Es allí donde entran las opciones que ofrecen alternativas de animaciones sutiles y que permiten la interacción entre los elementos principales y aquellos que no tienen mayor función más que estar allí, como pueden ser los fondos. Hemos visto en otras alternativas la posibilidad de agregar videos de fondo, e incluso muy en el pasado aquellos que los hacían rotar de forma constante, cosa que depende la textura que se utilizaba, resultaba bastante irritante.

Los videos embebidos son una opción nueva, mientras que los scrolls han caído en desuso, gracias al cielo, ya que no hacían otra cosa más que molestar la vista y recargar nuestro explorador con scripts pesados sin ninguna función específica más que moverse.

Animated Color Backgrounds

A pesar de esto, puede que surja la necesidad de animar ciertas secciones y que necesiten un script práctico y liviano que lo haga por ustedes. Allí es donde encontramos este JavaScript y cómo implementarlo para que cambiar el color de fondo automáticamente, resulte simple y sin mayores complicaciones.

Su creador, quien estuvo a cargo del rediseño de Themefy y utiliza este script en ciertas secciones, nos ofrece la posibilidad de acceder a él de forma gratuita y nos explica los pasos a seguir para que todo funcione correctamente y podamos a partir de allí, avanzar en la experimentación si es que, por ejemplo, necesitamos que los tonos que varían se muestren dentro de una misma paleta de colores que ya tenemos seleccionada.

Los archivos requeridos son:

De esta forma llamarán los archivos desde su HTML:

<script src="js/jquery-1.11.0.min.js"></script> 
<script src="js/jquery-ui.min.js"></script>
<script src="js/animated_bg.js"></script>

Luego, en cualquier sector del html que deseen incluir el fondo animado, agregarán la siguiente clase:

<div class="animated_bg"> 
*contenido*
</div>

A partir de allí, podrán modificar los colores y la velocidad de transición, según sus propias necesidades. No hay límites de colores.

<script>
        jQuery(document).ready(function(){ 

               $('.animated_bg2').animatedBG({ 
                        colorSet: ['#abebfe', '#aad667', '#57e6ee', '#ff7ebb'], 
                        speed: 2000 
               }); 

               $('.animated_bg3').animatedBG({ 
                        colorSet: ['#71a98b', '#b15c8e', '#dc6b68', '#6c5a94', '#b14c4e', '#736357'], 
                        speed: 6000 
               }); 

        }); 
</script>

Para especificar el color de fondo del elemento, para que no se produzca un salto en la transición, el componente debe tener en el CSS el mismo color inicial de la animación. Así es como en el CSS deberemos aplicar lo siguiente:

/* set bg color same as the first color defined in the animation function */ 
.animated_bg { 
     background: #ef008c; 
     color: #fff; 
} 

.animated_bg2 { 
     background: #abebfe; 
     color: #000; 
} 

.animated_bg3 { 
     background: #71a98b; 
     color: #fff; 
}

Es una buena opción para tener en cuenta ya que resulta muy simple de implementar con pocos recursos y les ofrece la posibilidad de generar espacios en los que el contenido varíe de una forma original. Para descargar el archivo, pueden hacerlo desde el sitio del autor Web Designer Wall. También pueden visitar la demo para ver su funcionamiento y analizar cómo implementarlo en sus propios diseños.

Categorizado en: