Animated background Color changer using Jquery UI

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.

DOWNLOAD LIVE DEMO

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.

JQUERY

<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>

and we can you use multiple color changer in one file with creating more classes.

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>

Like that we can use this script for text, div and for we can use it.and one more important thing is CSS. in the style sheet we have to make that the first offset color and class background should be same then only the script will works.

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;
}

i hope like this post, more for updates keep in touch with us in social media and subscribe to get my email updates. Thank you.

2 comments:

Anonymous2/23/2019 7:22 AM
Your means of telling all in this piece of writing is truly pleasant,
all be capable of effortlessly bbe aware of it,
Thanks a lot.
Anonymous3/21/2019 1:49 PM
Very nice post. I just stumbled upin your weblog andd wantred to say that I've
truly enjoyed surfing around your blog posts. After all
I will be subscribing to your rss feed and I hope you write again soon!

Pages

04 March 2015

Animated background Color changer using Jquery UI

2 comments: