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.

26 Comments

1 2
  1. Daisy Ontas
    Jun 12, 2014 @ 5:15 am

    wow..it is really awesome for design website background.. thanks for sharing.

    Reply

  2. Website
    Jun 16, 2014 @ 8:27 am

    Thank you.
    I love your website’s header.
    Its kind of my thing :D

    Reply

  3. Steve V
    Jun 22, 2014 @ 9:36 am

    Thanks for posting this, very cool way of automating background colors on page elements.

    Reply

  4. Nihel
    Jun 24, 2014 @ 4:12 pm

    we can do that by using only css3 :D

    Reply

  5. Website Design Ahmedabad
    Jun 26, 2014 @ 1:53 am

    Fantastic! A nice tutorial on animations. Thanks for sharing & Keep posting!!

    Reply

  6. Digiwebpro
    Jun 30, 2014 @ 2:26 pm

    Nice, the call for action buttons will get some colors, thank you !

    Reply

1 2

Leave a Reply