Come aggiungere uno sfondo casuale con JavaScript

In una pagina HTML vogliamo far variare l’immagine di sfondo in modo casuale pescando da un insieme di immagini.

Lo script qui sotto l’ho creato ed utilizzato in un sito sviluppato con WordPress in combinazione con il Visual Builder Elementor.

Per poterlo utilizzare può essere copiato ed incollato, ma è necessario aggiungere id=”random-section” alla sezione in cui si vuole rendere lo sfondo casuale.

Nel mio caso lo script l’ho utilizzato per far aggiungere uno sfondo casuale ad una pagina 404.

				
					<script>
    /* Funzione per estrarre casualmente l'url dell'immagine dall'array backgrounds */
    function getRandomImage(max) {
        let random = Math.floor(Math.random() * max);
        return backgrounds[random];
    }
    
    /* Questo array va popolato con tutti gli url delle nostre immagini di sfondo */
    let backgrounds = [
        'http://tuo-sito.com/wp-content/uploads/2021/07/immagine-1.png',
        'http://tuo-sito.com/wp-content/uploads/2021/07/immagine-2.png',
        'http://tuo-sito.com/wp-content/uploads/2021/07/immagine-3.png'];
    
    var section = document.querySelector("#random-section");
    
    let imgUrl = getRandomImage(backgrounds.length);
    
    section.style = `background-image: url(`+imgUrl+`);
    background-position: 5% 0%;
    background-repeat: no-repeat;
    background-size: contain;`;
</script>
				
			

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Most Recent

Come ridurre la dimensione di un boltdb

Questo post parte da questa risposta ad una domanda posta sul repository ufficiale di boltdb. Nella domanda si chiede come ridurre la dimensione di un database

Come installare uno script Go su Ubuntu

Go è un linguaggio di programmazione nato in Google dalle mani di Robert Griesemer, Rob Pike e Ken Thompson. Sintatticamente è molto simile al C

Come trasferire chiamate tra interni su FreePBX

Molti telefoni hardware hanno già incorporato un pulsante che può essere utilizzato per il trasferimento delle chiamate tra interni, altri invece ne sono sprovvisti. Cosa