CrossFade Background Slider

Avevo preparato questo div con lo sfondo animato per l’home page di questo sito, sarebbe dovuto essere lo sfondo del baloon iniziale ma le troppe animazioni appesantivano la pagina e l’animazione non era fluida.

Me lo giocherò altrove!

Questo è il pen che ho utilizzato per testarlo.

È un fork del Pen Cross-Fade Background Images w/ CSS Transitions & JS di Dudley Storey, adattato con i selettori css e le immagini utilizzate nel mio sito.

See the Pen Cross-Fade Background Images w/ CSS Transitions & JS by Andrea Cianni (@cianni) on CodePen.0

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();

i CSS

Javascript

Lascia un commento Annulla risposta