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 bgImageArray
il 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();
Lascia un commento