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... :)

Billef32
  • 275
  • 2
  • 3
  • 9
  • define classes with a `background-color`, add a transition like `transition: background-color 1000ms linear;`, and use JavaScript to add/remove these classes. – ckuijjer Jan 04 '15 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 Jan 04 '15 at 14:18
  • Yeah, you might be able to use css animations to do this – ckuijjer Jan 04 '15 at 14:27
  • Thanks but I found my answer (below) . Have a nice day. – Billef32 Jan 04 '15 at 14:31

3 Answers3

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; }
}
ckuijjer
  • 13,293
  • 3
  • 40
  • 45
  • Thanks for your code. I see that it runs pretty fast even though the time is set to 5s. Why's this happening? :) – Billef32 Jan 04 '15 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 Jan 04 '15 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);
Bogdan Kuštan
  • 5,427
  • 1
  • 21
  • 30
  • well done my friend :) thank you very much for actually helping :) – Billef32 Jan 04 '15 at 14:30
  • Can I control how much time the color will stay on before it starts changing? – Billef32 Jan 04 '15 at 14:59
  • @Billef32 30000 controls interval between changes – Bogdan Kuštan Jan 04 '15 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 Jan 04 '15 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 Jul 14 '16 at 09: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>
Marventus
  • 864
  • 1
  • 7
  • 14