Sep 11, 2011

JQuery Color Changing Background | JQuery Continous Color Change | JQuery Rainbow

In today's tutorial, I am going to share an easy way to change the background color of a page in infinite loops. In other words, change the background to rainbow.


Concept:The actual logic behind changing the color in infinite loops, is to get infinite colors. So trick is simple, take a RGB pattern and keep on changing the color code. So for that a logic of RGB code is written in jquery.color.js

So the index javascript consists of two major codes.

[html]

var rainbow = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';

[/html]

We are creating a variable named as rainbow and setting its value to rgb(random numbers). They are calculated and by using math.round and math.floor functions, the decimals are removed from it.

The last important thing is to append the color to the background of an HTML element.

[html]
$('#welcome').animate( { backgroundColor: rainbow }, 1000);
[/html]
The most important thing is how to get into infinite loops?????

Simple, within the function declare the same function, which will give us infinite loop.

So the entire javascript function will be.

[html]
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {

spectrum();

function spectrum(){
var rainbow = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
$('#welcome').animate( { backgroundColor: rainbow }, 1000);
spectrum();
}

});
// ]]></script>
[/html]

14 comments :

  1. This is a great tutorial.

    I would like to change the rotation only from black to white colors and set the delay time, would you please help me. How can I do this with your code.

    Thank you
    Constantine

    ReplyDelete
  2. You can do that by making two functions in JS and calling them one after other. check this code, its not fully correct way to do it, but as if now you can use it.

    rainbow();
                function rainbow(){
                    $("#welcome").css("background-color", "#ffffff").animate({ backgroundColor: "#000000"}, 1500);
                    rainbow2();
                }
               
                function rainbow2(){
                    $("#welcome").css("background-color", "#000000").animate({ backgroundColor: "#ffffff"}, 1500);
                    rainbow();
                }

    ReplyDelete
  3. Very interesting... might use something like this for notification messages.

    ReplyDelete
  4. Hi 
    Im trying to make this work, but not quite getting it. Can I just paste this script in my css and put the jquery file in the folder of the site? Nothing has to put between the tags to make this work?

    ReplyDelete
  5. If you can pass the id of the div correctly which is currently present in your site then it will work with out html code editing

    ReplyDelete
  6. Thanks, it works. Is there also an easy way to adjust the code, because I would like to select my own colors to use. And the colors change so quickly. Can I slow that down? Thank you.

    ReplyDelete
  7. you can adjust the time delay, but if you want your colors then you ll need to have a separate array which will pass your colors,

    to adjust the time

    $('#welcome').animate( { backgroundColor: rainbow }, 1000);change 1000 and see the effect

    ReplyDelete
  8. Any way i can put this in my tumblr html?

    ReplyDelete
  9. how do i put this in my tumblr blog?

    ReplyDelete
  10. I have never used tumblr, so no idea for it.

    ReplyDelete
  11. If i was to put this in my html, where would it be? Under or or something completely different? Help fast please.

    ReplyDelete
  12. Put the code above closing head tag check the html layout of the demo page

    ReplyDelete
  13. atomxml.org6/11/12 11:54 AM

    Thanks.

    ReplyDelete
  14. it was the exact thing i was locking for
    tanx a lot

    but how can we have only a set of specific colors to changing?

    ReplyDelete