Condividi
Contattami
Scroll verso il basso
//Cambiare Background durante uno scroll – Web

Cambiare Background durante uno scroll – Web

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.

 

Elementor Background cambiare scroll

 

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

 

Background cambiare scroll web

 

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

 

html Elementor Background cambiare scroll web

 

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 🙂

  • 6.080 views
  • 0 Commento

Leave a Reply

Il tuo indirizzo email non sarà pubblicato.

Categorie 02.

Ogni articolo equivale a 2 ore di lavoro

Chi sono 03.

Alessandro Albergo
Alessandro Albergo

Dopo le mie precedenti esperienze lavorative per alcune aziende in Italia e all’estero, decisi di intraprendere il percorso che da sempre mi affascinava e quindi seguire le miei passioni.

Segui la pagina Instagram per non perdere le news

Privacy & Cookie Policy  | © Alessandro Albergo 2022 | Theme created and designed with   by AA.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

 

Contattami
Chiudi
DutchEnglishFrenchGermanItalianSpanishSwedish