Today we are going to see about animated automatic background color changer using jquery and with jquery UI plugin. so this one is very simple one to make animated automatic background color changer with jquery. light weighted and responsive to all devices. my past post related to this background changer is Change background on refresh using Java script i hope you really gonna like this. let me tell you sets for how to create this background color changer.
i usually try to use .gif image for my title image, why because people want to know that, before going to read the blog, he can understand that the output will be like this. so i'm representing in image itself. the out put will be like this.
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script src="js/animated_bg.js"></script
the above all query are needed to run this function. we usually know that jquery.min.js and jquery-ui.min.js are library plugin files and except that animated_bg.js file is there. in that file only that background chager is running.
animated_bg.js
there in the purple highlighted you can change the colors as you need.
;(function($, window, document, undefined) { $.fn.animatedBG = function(options){ var defaults = { colorSet: ['#ef008c', '#00be59', '#654b9e', '#ff5432', '#00d8e6'], speed: 3000 }, settings = $.extend({}, defaults, options); return this.each(function(){ var $this = $(this); $this.each(function(){ var $el = $(this), colors = settings.colorSet; function shiftColor() { var color = colors.shift(); colors.push(color); return color; } // initial color var initColor = shiftColor(); $el.css('backgroundColor', initColor); setInterval(function(){ var color = shiftColor(); $el.animate({backgroundColor: color}, 3000); }, settings.speed); }); }); }; // Initialize $(function(){ $('.animated_bg').animatedBG(); }); }(jQuery, window, document));
HTML
<html class="animated_bg"> <head> <meta charset="utf-8"> <title>Animated automatic Background Colors changer without page refresh</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="container"> <h1>Animated Background Color changer using Jquery UI</h1> </div> <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script src="js/animated_bg.js"></script> </body> </html>
EXAMPLES FOR MULTIPLE COLOR CHANGERS
<div class="animated_bg2"> <div> ............... </div> </div> <div class="animated_bg3"> <div> ............... </div> </div> <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
/* offset first color and css background color shuld be same */ .animated_bg { background: #ef008c; color: #fff; } .animated_bg2 { background: #abebfe; color: #000; } .animated_bg3 { background: #71a98b; color: #fff; }
RELATED POSTS:
Animated scroll to top by using Jquery
How to create an animated .jpg image
Image slider with random animation effects using Jquery
Portfolio Design and sorting with Animation Effect
Change background on refresh using Java script
Change text & background color while selecting text using CSS3
How to make fixed background image for all browser using Css
Your means of telling all in this piece of writing is truly pleasant,
ReplyDeleteall be capable of effortlessly bbe aware of it,
Thanks a lot.
Very nice post. I just stumbled upin your weblog andd wantred to say that I've
ReplyDeletetruly enjoyed surfing around your blog posts. After all
I will be subscribing to your rss feed and I hope you write again soon!