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

L'articolo Cambiare Background durante uno scroll – Web proviene da Alessandro Albergo.

Ciao oggi ti spiegherò come mostrare un elemento, video o altro, al click di un pulsante(click to show) nel tuo sito web anche per CMS come WordPress utilizzando jquery.

Essendo una guida anche per siti Web che non utilizzano CMS, non servirà installare plugin su WordPress.

Utilizzando già di base un page builder come Elementor , Divi o altro, potrai creare tutto senza installare niente, ma nel caso così non fosse, dovrai scrivere il tuo codice all’interno del foglio .js del tuo tema oppure installare il plugin Simple Custom CSS and JS .

La bellezza di questo Plugin, è che puoi scrivere il tuo codice all’interno con il il modulo personalizza che usi di solito per il tuo sito e quindi mantenerlo anche nel caso tu dovessi cambiare il tema WordPress.

Sappi che tutto sarà creato utilizzando il codice in linguaggio jquery che ti mostrerò in questa guida.

Per prima cosa servirà creare una classe per la sezione che conterrà l’ elemento, (in questo esempio una parola) che apparirà al click del pulsante nel tuo sito web, nel caso il tuo sito non sia un CMS potrai crearla in questa maniera:

<section class="mostra-al-click"> 
 <div> 
  <p>Questo testo apparirà al click del pulsante</p>
 </div>
</section>

Nel caso tu stessi usando WordPress con un page builder come per esempio Elementor, potrai dare il nome della Classe nelle impostazioni della sezione cliccando su “avanzato”:

Bene adesso creiamo il pulsante che ci farà apparire la sezione grazie ad una classe che noi gli daremo:

<button class="clicca-e-mostra">Clicca qui per mostrare</button>

Usando WordPress, basterà inserire il pulsante e sempre con “avanzato” e aggiungere la classe :

Codice Jquery per mostrare elemento al click sul tuo sito web

Abbiamo quasi ultimato il click to show per il sito web, non ci resta che inserire il codice che ho creato, nel tuo html o nei vari fogli di .js e .css o nel plugin Simple Custom Css e Js. Oppure copiarlo nel modulo <html> del page builder che in questo esempio è Elementor:

<script>
    document.addEventListener('DOMContentLoaded', function() {
        jQuery(function($){
    $('.clicca-e-mostra').each(function(i){
    $(this).click(function(){ $('.showclick').eq(i).show();
    $('.mostra-al-click').eq(i).show();
    $('.clicca-e-mostra').eq(i).hide();
    $('.clicca-e-nascondi').eq(i).show();
    }); });
    });


    });
</script>
<style>
.mostra-al-click{ 
    cursor: pointer; 
    } 
.clicca-e-mostra{ 
    display: none; 
    } 
</style>

Per Elementor useremo il modulo <html>:

Come vedi il codice si divide in 2 parti.

• Una parte è lo style che ti servirà a nascondere la sezione contenente l’elemento e a far si che venga mostrato il puntatore del mouse sul bottone (che non avendo un link non te lo mostra).
• L’altra parte invece è il jquery che aggiungerà una proprietà (hide) al pulsante quando verrà mostrata l’immagine.

Posso creare un pulsante per far scomparire l’elemento e far riapparire il bottone ?

Certamente! Proviamoci subito !

Creiamo un pulsante “nascondi elemento”, che ci riporti al punto iniziale, quindi lo aggiungiamo subito sotto a quello già creato, ma con un’altra classe:

<button class="clicca-e-mostra">Clicca qui per mostrare</button>
<button class="clicca-e-nascondi">Clicca qui per nascondere</button>

Chiaramente ora andremo ad aggiungere qualche riga nel codice jquery e nello style per l’ultimo pulsante:

<script>
    document.addEventListener('DOMContentLoaded', function() {
        jQuery(function($){
    $('.clicca-e-mostra').each(function(i){
    $(this).click(function(){ $('.showclick').eq(i).show();
    $('.mostra-al-click').eq(i).show();
    $('.clicca-e-mostra').eq(i).hide();
    $('.clicca-e-nascondi').eq(i).show();
    }); });
    });  


    jQuery(function($){
    $('.clicca-e-nascondi').each(function(i){
    $(this).click(function(){ $('.clicca-e-nascond').eq(i).show();
    $('.mostra-al-click').eq(i).hide();
    $('.clicca-e-nascondi').eq(i).hide();
    $('.clicca-e-mostra').eq(i).show();
    }); });
    });  
    
    
    });
</script>

<style>
.clicca-e-mostra{
cursor: pointer;
}

.clicca-e-nascondi{
cursor: pointer;
}

.mostra-al-click{
display: none;
}

.clicca-e-nascondi{
display: none;
}
</style>

Ora non ti resta che salvare e goderti il tuo click to show e click to hide !

È stato utile ?

Lasciamo un commento per farmelo sapere!

L'articolo Mostrare elemento al click sul tuo sito web proviene da Alessandro Albergo.