Fading Background depending on Day Time

This jQuery script will crossfade backgrounds every 2 hours depending on the time of day. It will also be synchronous for all users as it starts cross-faded between two backgrounds if we're in between two time blocks.

by Laurens Swart

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="bg" id="backgroundOne">

</div>
<div class="bg" id="backgroundTwo">

</div>

CSS

body {
  overflow: hidden;
}

.bg {
  width: 100vw;
  height: 100vh;
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 99;
  opacity: 0.7;
  margin: 0;
  padding: 0;
}

.bg-0 {
  background-image: url("http://i.imgur.com/qexylYA.png");
}

.bg-1 {
  background-image: url("http://i.imgur.com/cRvIYLJ.png");
}

.bg-2 {
  background-image: url("http://i.imgur.com/UusvZC8.png");
}

.bg-3 {
  background-image: url("http://i.imgur.com/URjIjZS.png");
}

.bg-4 {
  background-image: url("http://i.imgur.com/Fy7kANa.png");
}

.bg-5 {
  background-image: url("http://i.imgur.com/e2lvJ8q.png");
}

.bg-6 {
  background-image: url("http://i.imgur.com/JEslGSe.png");
}

.bg-7 {
  background-image: url("http://i.imgur.com/v2h0qzb.png");
}

.bg-8 {
  background-image: url("http://i.imgur.com/xyfqUsX.png");
}

.bg-9 {
  background-image: url("http://i.imgur.com/XbIlhvL.png");
}

.bg-10 {
  background-image: url("http://i.imgur.com/xDAIc6P.png");
}

.bg-11 {
  background-image: url("http://i.imgur.com/kaCxCBi.png");
}

JavaScript

var timeBetweenBackgrounds = 7200000; // in milliseconds - change this to 7200000 for 2 hour between every image

var d = new Date();
var hour = d.getHours();
var minutes = d.getMinutes();
var bgNumber = getPicture(hour);

$(document).ready(function() {

  // Determine starting background images:

  if (bgNumber < 11) {
    var bgNumberNext = bgNumber + 1;
  }
  if (bgNumber == 11) {
    var bgNumberNext = 0;
  }
  
  $('#backgroundOne').addClass('bg-' + bgNumber);
  $('#backgroundTwo').addClass('bg-' + bgNumberNext);
  
  // Get time overshoot (i.e. how far (in percentage) are we in a certain time-block):
  // Every block is 2 hours, so 1 hour into a block would be 50% (0.50)
  // Every minute would be 1/120th of a block (minutes / 60 * 0.50)
  
  var timeovershoot= 0;
  
  // Add 50% to the current block if we're in the second hour of a block (see hour definition on the bottom and adjust this if necessary):
  
  if (hour == 0 || hour == 22 || hour == 20 || hour == 18 || hour == 16 || hour == 14 || hour == 12 || hour == 10 || hour == 8 || hour == 6 || hour == 4 || hour == 2){
    timeovershoot= timeovershoot + 0.5;
  }
  
  // Calculate minute overshoot and add this to the time overshoot:
  
  minuteovershoot= (minutes/60)*0.5;
  timeovershoot= timeovershoot + minuteovershoot;
  
  // Calculate time remaining till this block ends (to determine how long to continue fading for):
  
  percentageOfBlockDone= timeovershoot;
  percentageOfBlockRemaining= 1-percentageOfBlockDone;
  secondsInBlockRemaining= timeBetweenBackgrounds * percentageOfBlockRemaining;
  
  console.log('CURRENT TIME IS: ' + hour + ':' + minutes + '. STARTING BACKGROUNDS ARE: bg-' + bgNumber + ' (opacity ' + percentageOfBlockRemaining.toFixed(2) + ', fading OUT); bg-' + bgNumberNext + ' (opacity ' + percentageOfBlockDone.toFixed(2) + ', fading IN).')
  
  // Set opacity values adjusted to percentage of current block that has elapsed:
  // We're fading div ONE out, so this will have an opacity of...