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
It requires jQuery, jQuery UI, and the animated_bg.js script.
- jQuery UI
How To Use It
1. Include the scripts
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!
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.
colorSet: ['#abebfe', '#aad667', '#57e6ee', '#ff7ebb'],
colorSet: ['#71a98b', '#b15c8e', '#dc6b68', '#6c5a94', '#b14c4e', '#736357'],
/* set bg color same as the first color defined in the animation function */
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.