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