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.

27 Comments

saqib
May 3, 2014 at 9:50 pm

wow! this is awesome share. Thank You so much I was looking it for my blog and Glad I found it. Really like the flat changing of colors.

shaun
May 4, 2014 at 3:56 pm

i bet this could happen without js—add a body:hover .animated_bg { color & transition }. so long as the cursor is interacting somewhere on the page, that div would get the action!

Kay
May 5, 2014 at 2:41 am

Nice script!
But I got one question. Why didn’t you solve this with CSS3 animations instead of JavaScript?

Jens
May 6, 2014 at 6:25 am

The demo looks great. Will give it a try soon.

Mohammed Saimon
May 6, 2014 at 10:48 am

Very nice tips. I will definitely try it today.

ijja pixel hint
May 6, 2014 at 7:09 pm

Nice tutorial, simple & cool effect

Robby
May 6, 2014 at 7:17 pm

Ohh this is awesome. Such a simple script for a cool effect, I’m going to have to give this a try on one of my projects!

Digital Marketing Agency Boss
May 7, 2014 at 3:19 am

This is a great post, and I love the effect you are creating. I wonder whether you could take that a stage on and have an illustration which only moves in part to change colour – maybe one for my graphic designers! Thanks for sharing.

David Landriault
May 7, 2014 at 5:15 pm

Great share. Thanks, can’t wait to check this out on one of our websites.

Tary
May 10, 2014 at 3:48 am

Hi there, Thanks for this animating background color script. You have shared really a nice thing! Appreciated!

Tom
May 11, 2014 at 9:06 am

Works great, thank you !

John
May 11, 2014 at 9:25 pm

Could you please do one on how you animated the different elements on themify and how to implement that across various themes?
The more details the better as I’m just beginning!
Thanks!

marsjaninzmarsa
May 12, 2014 at 10:33 am

It can be created with CSS3 animations only…

Tim
May 16, 2014 at 2:49 am

jquery, jquery UI and animated_bg.js? I kindly refuse this solution, and offer this alternative using CSS transitions and animations alone: http://jsfiddle.net/timv88/j5w5V/

The downside of my fiddle (which is missing a -moz- and -o- prefix for older browsers) is that it won’t work in < IE9 (see http://caniuse.com/css-animation). Is this a reason to include 3 javascript downloads? In my opnion, unless the changing background colour is a core business/design requirement the additional JS should be avoided at all costs.

You can however include the JS files conditionally for < IE9 with `` – but even then you should consider performance implications.

Web Designing
May 16, 2014 at 6:03 am

Wow its really great Idea. Looks awesome. Thanks.

cartonic
May 17, 2014 at 2:16 pm

Thanks and thanks and thanks! When I first saw that on Themify it was so cool that I felt ashamed even to just ask.

Now you have the giveaway but I feel so sorry that my redesigned blog has no room for it. I’ll keep it on a shortlist for a future project :D

PedroDK
May 18, 2014 at 8:38 am

Hi,
What a truly great thing for backgrounds. It makes you think of some of the most famous fim effects of the 1960’s. Tarantino has been playing with this in some of his films…
Would you please consider guiding me on how to implement this in WordPress?
Thanks.

David Jones
May 20, 2014 at 1:57 am

Man, you’re a lifesaver! I’m always looking for a way to spice up my sites, and a great background is often the best way to do it. Thanks for the script. Its a good idea that I don’t have to think of, and not only that, its one I don’t have to progam.

Blessings.

Effortsunlimited
Jun 9, 2014 at 5:19 am

Wow! great information on animation background.Now I can also use it.Even i don’t have to write a script on my own for it.You have made things simpler.No doubt.great efforts!I think css3 animations could have used.

Nadzwyczajki
Jun 9, 2014 at 6:12 am

I like it a lot. I think I’ll implement it on our site :)

Daisy Ontas
Jun 12, 2014 at 5:15 am

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

Website
Jun 16, 2014 at 8:27 am

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

Steve V
Jun 22, 2014 at 9:36 am

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

Nihel
Jun 24, 2014 at 4:12 pm

we can do that by using only css3 :D

Website Design Ahmedabad
Jun 26, 2014 at 1:53 am

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

Digiwebpro
Jun 30, 2014 at 2:26 pm

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

Designix
Feb 1, 2017 at 1:48 pm

I’m surprised by the content quality of this blog, won one more follower!

Post Comment or Questions

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.