Animating Background Colors

Posted on February 16, 2013 at 11:57 am

As promised in my previous post, I will be sharing some of the scripts used on the Themify redesign. Today I’m going to share the animating background color script as seen on the site. It is a simple jQuery script that animates a series of background colors in a loop. It runs smoothly on desktop, tablet, and even mobile devices.

View Demo Animating BG Colors

Download Demo ZIP

Required Javascripts

It requires jQuery, jQuery UI, and the animated_bg.js script.

  • jQuery
  • jQuery UI
  • animated_bg.js

How To Use It

1. Include the scripts

Include the required Javascripts in the page.


 <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>
 

Add .animated_bg class

Then add animated_bg class to any element where you want the animating background color function to appear. It can be added in html, body, link, heading, div, form elements, etc. It literally works on any element!


 <div class="animated_bg">
 	content
 </div> 
 

Custom animating colors

You can add your own custom colors and animation speed. In the sample code below, I’ve added .animated_bg2 and .animated_bg3 to show different colors and speed. Add as many colors as you want.


 <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>
 

CSS Fallback

In the CSS, specify the background color of the element to be the same as the first color of the animation. In case Javascript fails, it will fallback to the CSS background-color property.


 /* 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;
 }
 

Have Fun!

View final demo or download the demo zip. Feel free to use this script for your projects or any purpose. If you would like to provide credits, please link it to this article or themify.me site.

Posted in Web Design