CrossFade Background Slider

i CSS

Mentre nel Pen i CSS son impostati perchè il div in cui faccio scorrere i background sia a schermo pieno

#baloon {
  /* imposto l'immagine di backgroud */
  background: url("https://www.cianni.work/wp-content/uploads/2019/06/background-01.jpeg") no-repeat center center;
  backgroud-size: cover;
  /* imposto 3secondi di transizione perchè sia fluida */
  transition: background 3s;
  /* imposto il div in modo che occupi tutto lo schermo */
  min-height:100vh;
  position:relative;
}
body { margin: 0; }

In questa pagina ho impostato il div in modo che abbia una grandezza definita.

#baloon {
	background: url("https://www.cianni.work/wp-content/uploads/2019/06/background-01.jpeg") no-repeat center center;
	background-size: cover;
	transition: background 3s;
	max-height:800px;
	min-height: 400px;	
}

Javascript

Questo è composto da due parti, la prima crea una cache delle immagini in modo che l’animazione sia fluida già dal primo caricamento.

È, per questo, molto importante utilizzare non troppe immagini e sopratutto ben ottimizzate. Personalmente mi trovo bene, per l’ottimizzazione delle immagini che userò sul sito con il tool online Bulk Resize di ImageResize.org

var bgImageArray = ["01", "02", "03", "04", "05","06", "07", "08", "09", "10","11", "12", "13", "14", "15" ],
    base = "https://www.cianni.work/wp-content/uploads/2019/06/background-",
    ext = ".jpeg";
    secs = 4;
    bgImageArray.forEach(function(img) {
      new Image().src = base + img + ext;
      // caches images, avoiding white flash between background replacements
    });

Nulla vi vieta di inserire direttamente nella var bgImageArrayil percorso assoluto o relativo delle vostre immagini, comprensivo di estensione. WordPress infatti organizza i media in cartelle e sottocartelle per anno e mese, non è quindi detto che le immagini siano, come nel mio caso, tutte nella stessa cartella.

Infine viene definita e poi chiamata la funzione function backgroundSequence() che sarà la responsabile del cambio ciclico dei background

function backgroundSequence() {
	  window.clearTimeout();
	  var k = 0;
	  for (i = 0; i < bgImageArray.length; i++) {
		setTimeout(function() {
		  document.getElementById("baloon").style.background = "url(" + base + bgImageArray[k] + ext + ") no-repeat center center";
		  document.getElementById("baloon").style.backgroundSize = "cover";
		  if (k + 1 === bgImageArray.length) { setTimeout(function() { backgroundSequence(); }, secs * 1000); } else { k++; }
		}, secs * 1000 * i);
	  }
	}
	backgroundSequence();