L'effetto parallax scrolling è una tecnica di design che crea un'illusione di profondità facendo muovere le immagini di sfondo a una velocità diversa rispetto al contenuto in primo piano. Questo effetto è molto usato nei siti web moderni per rendere l'esperienza utente più coinvolgente e dinamica. Lo troviamo spesso in landing page accattivanti, siti di storytelling e pagine promozionali.
Effetto parallax su immagini di sfondo con HTML, CSS e JS
In questa guida, vedremo come creare un semplice effetto parallax su immagini di sfondo utilizzando HTML, CSS e JavaScript, partendo da un metodo base con CSS fino a un controllo avanzato tramite JavaScript. Alla fine di questa guida otterremo un risultato in cui ci sarà una pagina con un design moderno e un effetto di scorrimento fluido e accattivante.
Cosa serve per creare l'effetto Parallax
In questo tutorial realizzeremo una pagina web con effetto parallax, in cui le immagini di sfondo si muoveranno a velocità diversa rispetto al contenuto in primo piano. Creando un'illusione di profondità. Il nostro esempio sarà una landing page a tema natura, con sezioni che includono testi e immagini di sfondo con l'effetto parallax. Per creare questo effetto utilizzeremo HTML per la struttura della pagina, CSS per lo stile e un primo approccio all'effetto, e JavaScript per un controllo più avanzato del movimento in base allo scroll dell'utente.
<body>
<section class="parallax parallax1">
<div class="text">
<h1>Esplora la Natura</h1>
<p>Sei pronto a vivere un'esperienza unica?</p>
</div>
</section>
<section class="content">
<p>Scorri verso il basso per vedere l'effetto parallax in azione!</p>
</section>
<section class="parallax parallax2">
<div class="text">
<h1>Avventura Infinita</h1>
</div>
</section>
<script src="script.js"></script>
</body>Il codice HTML mostrato sopra rappresenta la struttura della pagina. Essa sarà composta da 3 sezioni principali, ognuna con del testo ed un'immagine di sfondo. In particolare, la prima e la terza hanno la classe parallax
content
body, html {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
overflow-x: hidden;
}
.parallax {
position: relative;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 2em;
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.text {
display: flex;
flex-direction: column;
text-align: center;
background-color: #416070bd;
padding: 20px;
}
.parallax1 {
background-image: url('url-immagine-1');
}
.parallax2 {
background-image: url('url-immagine-2');
}
.content {
padding: 50px;
text-align: center;
background: white;
font-size: 1.2em;
color: #333;
}Dopo una prima impostazione generale della pagina (con i tag body
html
parallax
100vh
Infine, con parallax1
parallax2
content
Il codice JavaScript
window.addEventListener("scroll", function () {
let scrolled = window.scrollY;
document.querySelector(".parallax1").style.backgroundPositionY =
scrolled * 0.5 + "px";
document.querySelector(".parallax2").style.backgroundPositionY =
scrolled * 0.9 + "px";
});Il codice JavaScript è breve e funziona in questo modo: la funzione rimane in attesa dello scroll della pagina e, tramite window.scrollY
backgroundPositionY
background-attachment: fixed
0.5
0.9
Grazie a questa combinazione di codice HTML + codice CSS, oltre che all'aggiunta di una funzione JavaScript, è stato possibile ottenere un risultato ad effetto parallax su delle sezioni con testo ed immagini. Di seguito viene riportata un'anteprima dell'esempio appena sviluppato.
Recap e conclusione
In questa guida, abbiamo visto come creare un effetto parallax basato sullo scroll utilizzando HTML, CSS e JavaScript. La pagina è stata strutturata con più livelli di sfondo, stilizzati per creare un senso di profondità. Grazie all'implementazione di un semplice script JavaScript è stato possibile muovere gli elementi a velocità diverse durante lo scroll.
Questo effetto è ampiamente utilizzato nel web moderno per rendere le pagine più dinamiche e coinvolgenti migliorando l'esperienza visiva dell'utente. Il parallax è spesso impiegato nei siti di portfolio, landing page e pagine promozionali, donando un tocco di eleganza e modernità.
L'esempio fornito può essere ulteriormente migliorato e personalizzato. Infatti è possibile modificare la velocità di movimento, aggiungere più livelli o combinare l'effetto con animazioni aggiuntive per rendere l'interazione ancora più fluida.
Inoltre, si può sperimentare con overlay colorati, effetti di sfocatura o persino integrazioni con librerie JavaScript per controlli avanzati. L'unico limite è la creatività!
