Realizzare un effetto dinamico e moderno che modifica il colore di una sezione durante lo scroll della pagina utilizzando HTML, CSS e JavaScript? È possibile, e vedremo come.
Un modo semplice per creare un'esperienza web più dinamica consiste nel modificare il colore dello sfondo mentre l'utente scorre la pagina. In questo tutorial realizzeremo una sezione il cui colore cambia progressivamente in base alla posizione dello scroll, utilizzando HTML, CSS e JavaScript puro.
Il risultato è particolarmente interessante per:
- Landing Page;
- Portfolio;
- Hero Section;
- Siti creativi;
- Presentazioni di prodotto.
Il risultato finale
Durante lo scroll il background della sezione cambierà gradualmente colore, creando una transizione fluida tra diverse tonalità.
Struttura HTML
Creiamo una sezione molto alta con un titolo centrale.
<section class="color-section">
<div class="color-content">
<h1>Colori che cambiano</h1>
<p>Scrolla la pagina per vedere l'effetto.</p>
</div>
</section>
<section class="content">
<h2>Nuova sezione</h2>
<p>Continua a scorrere la pagina.</p>
</section>Codice CSS
Impostiamo innanzitutto uno stile di base per la pagina e definiamo la sezione che conterrà l'effetto di cambio colore.
La proprietà height: 200vh rende la sezione alta il doppio dell'altezza della finestra del browser. In questo modo abbiamo abbastanza spazio verticale per permettere all'utente di scorrere all'interno della sezione e rendere visibile la variazione progressiva del colore.
All'interno della sezione utilizziamo invece position: sticky per mantenere il contenuto visibile mentre l'utente scorre. Il titolo e il testo rimangono quindi fermi nella viewport, mentre lo sfondo della sezione cambia progressivamente.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
.color-section {
height: 200vh;
background: rgb(40, 80, 200);
position: relative;
}
.color-content {
position: sticky;
top: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: white;
}
.color-content h1 {
font-size: clamp(50px, 8vw, 100px);
margin-bottom: 20px;
}
.color-content p {
font-size: 22px;
}
.content {
min-height: 100vh;
padding: 120px 10%;
background: #fff;
color: #222;
}
.content h2 {
font-size: 50px;
margin-bottom: 30px;
}
.content p {
line-height: 1.8;
}
JavaScript
Ora calcoliamo la percentuale di scroll e la utilizziamo per modificare progressivamente i valori RGB del colore.
Il principio alla base dell'effetto è semplice: mentre l'utente scorre la pagina, JavaScript rileva la posizione dello scroll e la converte in un valore compreso tra 0 e 1. Questo valore rappresenta l'avanzamento dell'animazione.
Quando progress vale 0, siamo all'inizio dell'effetto e viene utilizzato il colore iniziale. Quando raggiunge 1, siamo alla fine e viene raggiunto il colore finale.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
.color-section {
height: 200vh;
background: rgb(40, 80, 200);
position: relative;
}
.color-content {
position: sticky;
top: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: white;
}
.color-content h1 {
font-size: clamp(50px, 8vw, 100px);
margin-bottom: 20px;
}
.color-content p {
font-size: 22px;
}
.content {
min-height: 100vh;
padding: 120px 10%;
background: #fff;
color: #222;
}
.content h2 {
font-size: 50px;
margin-bottom: 30px;
}
.content p {
line-height: 1.8;
}La variabile progress restituisce un valore compreso tra 0 e 1. All'inizio dello scroll vale 0, mentre alla fine vale 1. Utilizziamo questo valore per interpolare progressivamente i tre componenti del colore: rosso, verde e blu.
Utilizzare più colori
Puoi rendere l'effetto ancora più interessante utilizzando più tonalità durante lo scroll, ad esempio:
- Blu → Viola;
- Viola → Rosa;
- Rosa → Arancione.
In questo modo puoi creare una vera e propria esperienza cromatica che accompagna l'utente lungo la pagina.
Conclusione
Con HTML, CSS e JavaScript abbiamo creato una sezione che cambia colore in modo progressivo mentre l'utente scorre la pagina, trasformando un semplice movimento verticale in un elemento visivo capace di rendere l'esperienza di navigazione più dinamica e coinvolgente.
Il vantaggio di questo approccio è che non sono necessarie librerie o plugin esterni: l'effetto viene realizzato utilizzando esclusivamente tecnologie web native e può essere facilmente personalizzato modificando i colori, l'altezza della sezione e la velocità con cui avviene la transizione.
È un effetto semplice ma molto efficace e può essere utilizzato per creare landing page più dinamiche, presentazioni di prodotto, portfolio e siti web dal design moderno. Può inoltre essere combinato con altri effetti legati allo scroll, come animazioni del testo, immagini che cambiano posizione o elementi che compaiono progressivamente durante la navigazione.
Con poche righe di JavaScript è quindi possibile trasformare una normale sezione della pagina in un elemento interattivo che accompagna visivamente l'utente durante lo scroll.
