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.
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.
saqib
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
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
Nice script!
But I got one question. Why didn’t you solve this with CSS3 animations instead of JavaScript?
Jens
The demo looks great. Will give it a try soon.
Mohammed Saimon
Very nice tips. I will definitely try it today.
ijja pixel hint
Nice tutorial, simple & cool effect
Robby
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
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
Great share. Thanks, can’t wait to check this out on one of our websites.
Tary
Hi there, Thanks for this animating background color script. You have shared really a nice thing! Appreciated!
Tom
Works great, thank you !
John
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
It can be created with CSS3 animations only…
Tim
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
Wow its really great Idea. Looks awesome. Thanks.
cartonic
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
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
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
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
I like it a lot. I think I’ll implement it on our site :)
Daisy Ontas
wow..it is really awesome for design website background.. thanks for sharing.
Website
Thank you.
I love your website’s header.
Its kind of my thing :D
Steve V
Thanks for posting this, very cool way of automating background colors on page elements.
Nihel
we can do that by using only css3 :D
Website Design Ahmedabad
Fantastic! A nice tutorial on animations. Thanks for sharing & Keep posting!!
Digiwebpro
Nice, the call for action buttons will get some colors, thank you !
Designix
I’m surprised by the content quality of this blog, won one more follower!