Cambiare colore dello sfondo (background) durante uno scroll della tua pagina Web

Stai cercando una guida su come creare un effetto per cambiare il background durante lo scroll in una tua pagina web ? Sei nel posto giusto!

In questa guida spiegherò come realizzare questo fantastico effetto grazie a l’utilizzo del codice Jquery, infatti sarà possibile realizzarlo su qualsiasi sito, anche su un CMS come WordPress.

PS: Trovi il video in fondo alla pagina.

Mi concentrerò però sulla guida in WordPress, visto che potrei dare per scontato che per chi sviluppi senza l’utilizzo di un CMS, sappia già come incorporare il codice nel proprio sito.

Inoltre per creare questo effetto, incorporerò i miei snippset (righe di codice) all’interno del famoso page builder Elementor , vista la sua possibilità di poterli inserire all’interno della pagina .

Quindi il primo passo da fare, è scaricare il nostro plugin (anche la versione Free va bene) dal sito o direttamente dal solito “aggiungi nuovo plugin” di WordPress.

Ora andiamo a creare una pagina nuova con Elementor (io utilizzerò per la guida la modalità Elementor Canvas che rende la pagina totalmente vuota).

Aggiungiamo la nostra prima sezione, e inseriamo all’interno l’elemento “html” in cui andremo ad inserire il codice:

Bene adesso inseriamo nel nostro primo blocco html, l’ attivatore jquery che farà funzionare il nostro codice:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

Il prossimo passo ora, è creare 2 sezioni abbastanza grandi per far si che la pagina abbia uno scroll.

Io per esempio ho inserito le parole Giallo e Blu (il colore dello sfondo che vedrai sarà bianco, non cambiarlo in giallo perché avverrà tutto automaticamente).

Infine creiamo un altro blocco “html” in fondo alla pagina in cui inseriremo il codice che ho creato per te:

<script>
    $(document).ready(function(){       
            var scroll_pos = 0;
            $(document).scroll(function() { 
                scroll_pos = $(this).scrollTop();
                if(scroll_pos > 280) {
                    $("body").css('background-color', 'blue');
                } else {
                    $("body").css('background-color', 'yellow');
                }
            });
        });
</script>

Come vedi il codice ha: if(scroll_pos > 280) :  Questo ci indica che, superando un’altezza di 280px, il “body” (il corpo della pagina) avrà un colore blu, altrimenti “else” un colore giallo. 

Quindi se quello che stai creando dovesse aver bisogno di uno scroll maggiore prima di cambiare colore, dovrai aumentare il valore di “280” 😀 .

Adesso dovresti vedere la tua pagina simile a questo screenshot:

Bene, salviamo il tutto e godiamoci l’effetto sulla pagina Web!

Che ne pensi ? È stato utile l’articolo ?

Lasciamo un commento per farmelo sapere 🙂