13

I would like someone to tell me what's the code for making a webpage background color (the background color of the whole page) to change (fade transition) every 30s to a given color variety. Is it simple? I guess css will make it easier?

I've searched over the internet and I only found gradients which is not what I want. Thank you in advance. I 've search codepen and jsfiffle for examples but no one had something that simple :/

Example: While browsing my page I want the background color to change from blue to green and then to orange and again blue and so on so on... :)

4
  • define classes with a background-color, add a transition like transition: background-color 1000ms linear;, and use JavaScript to add/remove these classes.
    – ckuijjer
    Commented Jan 4, 2015 at 14:12
  • Add did that but the how do I achieve the fade effect? Also can you be more specific about Javascript? Why to use js at all? Wouldn't be simpler if I call a class in my html page and leave it there as it is?
    – Billef32
    Commented Jan 4, 2015 at 14:18
  • Yeah, you might be able to use css animations to do this
    – ckuijjer
    Commented Jan 4, 2015 at 14:27
  • Thanks but I found my answer (below) . Have a nice day.
    – Billef32
    Commented Jan 4, 2015 at 14:31

3 Answers 3

35

It's also possible to do this without any JavaScript at all, using CSS3 animations.

html,
body {
  height: 100%;
}

body {
  -webkit-animation: background 5s cubic-bezier(1,0,0,1) infinite;
  animation: background 5s cubic-bezier(1,0,0,1) infinite;  
}


@-webkit-keyframes background {
  0% { background-color: #f99; }
  33% { background-color: #9f9; }  
  67% { background-color: #99f; }
  100% { background-color: #f99; }
}

@keyframes background {
  0% { background-color: #f99; }
  33% { background-color: #9f9; }  
  67% { background-color: #99f; }
  100% { background-color: #f99; }
}

2
  • Thanks for your code. I see that it runs pretty fast even though the time is set to 5s. Why's this happening? :)
    – Billef32
    Commented Jan 4, 2015 at 19:58
  • It's the overall time of the animation, so it takes 5s divided by 3 so about 1.5s per color. The bezier function handles the fading, if you need more control over this, you can duplicate the background colors inside the keyframes (e.g. add 30% for #f99)
    – ckuijjer
    Commented Jan 4, 2015 at 20:10
10

Something like this fiddle

CSS:

body {
    background: blue; /* Initial background */
    transition: background .5s; /* .5s how long transitions shoould take */
}

Javascript:

var colors = ['green', 'orange', 'blue']; // Define Your colors here, can be html name of color, hex, rgb or anything what You can use in CSS
var active = 0;
setInterval(function(){
    document.querySelector('body').style.background = colors[active];
    active++;
    if (active == colors.length) active = 0;
}, 30000);
5
  • well done my friend :) thank you very much for actually helping :)
    – Billef32
    Commented Jan 4, 2015 at 14:30
  • Can I control how much time the color will stay on before it starts changing?
    – Billef32
    Commented Jan 4, 2015 at 14:59
  • @Billef32 30000 controls interval between changes Commented Jan 4, 2015 at 15:56
  • 30000 is milliseconds? I mean can I put something like 15s as a value? or should I add transition-delay? I added a transition delay in css but it didn't work.
    – Billef32
    Commented Jan 4, 2015 at 15:58
  • How can I change the code so that the counting starts with the colors in the array and does not have an initial color? Or in your example the first color to show would be green from the array and not blue. How can I do that please?
    – lowtechsun
    Commented Jul 14, 2016 at 9:22
5

Here's a jQuery approach, to complete Bogdan's answer, that takes 3 parameters: selector (example, ".container" or "div"), colors (an array of colors to switch in between) and time (controls how frequently the bgd color changes). I set it for 3 seconds (3000) so you can see it in action easier, but you can increase it to 30000 (30 seconds).

jQuery(function ($) {
    function changeColor(selector, colors, time) {
        /* Params:
         * selector: string,
         * colors: array of color strings,
         * every: integer (in mili-seconds)
         */
        var curCol = 0,
            timer = setInterval(function () {
                if (curCol === colors.length) curCol = 0;
                $(selector).css("background-color", colors[curCol]);
                curCol++;
            }, time);
    }
    $(window).load(function () {
        changeColor(".container", ["green", "yellow", "blue", "red"], 3000);
    });
});
.container {
    background-color: red;
    height:500px;
    -webkit-transition: background-color 0.5s ease-in-out;
    -moz-transition: background-color 0.5s ease-in-out;
    -o-transition: background-color 0.5s ease-in-out;
    -khtml-transition: background-color 0.5s ease-in-out;
    transition: background-color 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container"></div>

1
  • 1
    Very nice!! Indeed :) I hope this post will help other people that look for something similar :)
    – Billef32
    Commented Jan 5, 2015 at 11:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.