make HTML background always changing

Question

What do I mean by 'Always changing'? Well, for example, the Windows 8 installing screen, you see a text at the middle that says:'You can get new apps from the store', and the background are changing from red to orange to yellow to green to cyan to blue to purple then to red. I mean, how do I do that to my HTML background with JavaScript?

Answer 1

The most simplest, effective and shortest amount of code is to do this using some CSS and JS

CSS:

#myDiv {
    transition: background-color 2s;
}

Then you can set some colors in an array and call them when you need, or ever so often, or use the below function to generate random colors.

JS:

function randomColor() {
    return '#'+ ('000000' + (Math.random()*0xFFFFFF<<0).toString(16)).slice(-6)
}

Below is a working implementation that changes the color every 2 seconds.

function randomColor() {
    return '#'+ ('000000' + (Math.random()*0xFFFFFF<<0).toString(16)).slice(-6)
}

function setColor(){
    document.getElementById('myDiv').style.backgroundColor = randomColor();
    setTimeout(setColor, 2000);
}

setColor();

#myDiv {
    height: 150px;
    transition: background-color 2s;
}

<div id="myDiv"></div>

Answer 2

If you want to have changing colors, here is a script I wrote to produce a sky effect using CSS transitions.

It does create a new div over the targeted element and apply to both a radial-gradient. Then the upper one's opacity is changed to 0, revealing the background one, while the foreground-one changed value. It does produce a smooth transition effect.

You can pass restriction colors in the form of an array, a speed variable in the form of an Number, and the id of a target element.
You can also omit all those parameters.

I wrote it a long time ago, and it probably needs a lot of improvements, but I hope you can twirk it and make it useful for you :

function Sky() {
  var sky = {};

  function rand(x) {
    if (!x) x = 1;
    return Math.round(Math.random() * x);
  }

  var isArray = function(arr) {
    if (isArray in Array) return Array.isArray(arr);
    else return arr instanceof Array;
  }

  var Chuck = function(arr) {
    var total = 0;
    arr.forEach(function(e) {
      total += e
    })
    return (total / arr.length == 0 || total / arr.length == 255);
  }

  function nightDay() {
    var RGB = sky.RGB;
    var shouldChange = Chuck(RGB);
    if (shouldChange) sky.toNight = !sky.toNight;
    for (var i = 0; i < RGB.length; i++) {
      RGB[i] += (sky.toNight) ? 10 : -10;
      if (RGB[i] < 0) {
        RGB[i] = 0;
      }
      if (RGB[i] > 255) {
        RGB[i] = 255;
      }
    }

    return "radial-gradient( " +
      "rgba(" + (rand(RGB[0]) + RGB[1]) + " ," + (rand(RGB[2]) + RGB[3]) + " ," + rand(RGB[4] + RGB[5]) + ", 0.9) " + rand(25) + "%, " +
      "rgba(" + (rand(RGB[6]) + RGB[7]) + " ," + (rand(RGB[8]) + RGB[9]) + " ," + (rand(RGB[10]) + RGB[11]) + ", 0.9) " + (rand(25) + 500) + "%) " +
      "rgba(0, 0, 0, 0) repeat scroll " + rand(50) + "px " + rand(50) + "px / cover";
  }


  function changeOp(e) {
    var val = nightDay();
    var op = +sky.over.style.opacity;
    if (op > 0) {
      // First div is opaque
      if (!sky.isWebkit) {
        sky.el.style.background = val;
        if (!sky.el.style.background)
          sky.isWebkit = true;
      }
      if (sky.isWebkit)
        sky.el.style.background = "-webkit-" + val;
    } else {
      //first div is transparent
      if (!sky.isWebkit)
        sky.over.style.background = val;
      else
        sky.over.style.background = "-webkit-" + val;
    };
    sky.over.style.opacity = +!op;
  };

  function setCSS() {
    if (sky.el.parentNode) sky.el.parentNode.style.position = 'relative';
    var hasHeight = parseInt(getComputedStyle(sky.el.parentNode).height) > 0;
    sky.el.style.height = hasHeight ? "100%" : "100vh";
    sky.el.style.overflow = 'auto';
    sky.el.style.width = hasHeight ? "100%" : "100vh";
    sky.el.style.margin = "0";
    sky.el.style.zIndex = -2;
    sky.el.webkitTransform = 'translate3d(0,0,0);'
    sky.el.transform = 'translate3d(0,0,0);'
    sky.over = document.createElement('div');
    sky.el.insertBefore(sky.over, sky.el.firstChild);
    sky.over.setAttribute('style', 'z-index: -1; position: absolute; pointer-events:none; height:100%; width:100%; opacity:1; -webkit-transition : opacity linear ' + sky.speed / 1000 + 's; transition : opacity linear ' + sky.speed / 1000 + 's;');
    if (sky.el === document.body) {
      sky.over.style.position = 'fixed';
      sky.over.style.top = 0;
    }
  }

  sky.stop = function() {
    sky.over.removeEventListener('transitionend', changeOp, false);
  }

  sky.start = function() {
    sky.over.addEventListener('transitionend', changeOp, false);
    changeOp();
  }

  function checkLength(arr) {
    if (arr.length < 13) {
      for (var i = arr.length - 1; i < 13; i++) arr[i] = 0;
    };
  }

  function init(args) {
    for (var a = 0; a < args.length; a++) {
      switch (typeof(args[a])) {
        case "string":
          var getEl = document.getElementById(args[a]);
          sky.el = getEl || document.body;
        case "number":
          sky.speed = args[a];
        case "object":
          if (isArray(args[a])) {
            sky.RGB = args[a];
            checkLength(sky.RGB);
          };
        case "boolean":
          sky.auto = args[a];
      }
    }
    if (!sky.el) sky.el = document.body;
    if (!sky.speed) sky.speed = 9000;
    if (!sky.RGB) sky.RGB = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
    if (sky.auto === undefined) sky.auto = true;
    if (sky.el.style.opacity === undefined) {
      var RGB = sky.RGB;
      sky.el.style.backgroundColor = "rgb(" + (rand(RGB[0]) + RGB[1]) + " ," + (rand(RGB[2]) + RGB[3]) + " ," + rand(RGB[4] + RGB[5]) + ")";
      return;
    }
    setCSS();
    if (sky.auto)
      sky.start();
    setTimeout(changeOp, 200);
  }
  init(arguments);
  return sky;
}

new Sky([255, 120, 255, 120, 255, 120, 255, 120, 255, 120, 255, 120], 5000);

#content{width:100vw; height: 100vh}

<div id="content">Here is some content</div>