Did you visit themify website recently? The popular WordPress theme designers have redesigned their official website and that featured a stunning animating backgrounds. In this tutorial, I’m going to tell you how to create animating background colors using jQuery.
Here we go,
All you need is to download the zip file provided at the bottom of this post. After extracting the zip file, you will find three javascript files – jQuery, jQuery UI and animated_bg.js
Link the scripts in your document as below
<script src="jquery-1.11.0.min.js"></script> <script src="jquery-ui.min.js"></script> <script src="animated_bg.js"></script>
Add the necessary class (animated_bg2) to the element that you wish to have animating background color. For example, I’m going to add the animated background effect to <body>. Of course, you can use it on any html element – div, form, button etc…
<body class="animated_bg2"> </body>
Adding colors and animation speed
<script>
jQuery(document).ready(function(){
$('.animated_bg2').animatedBG({
colorSet: ['#abebfe', '#aad667', '#57e6ee', '#ff7ebb'],
speed: 2000
});
});
</script>In the above code, change the colors under colorSet and the animation speed in speed.
What if Javascript didn’t load? You should create a CSS callback in that case.
.animated_bg2 { background: #ef008c; color: #fff; }That’s it! Here’s the demo link.
Credits: Thanks to WebDesignerWall.
