Animated background Color changer using Jquery UI | 2my4edge

04 March 2015

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.




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

No comments:

Post a Comment

^