Nel panorama del web design moderno, catturare l’attenzione dei visitatori è fondamentale. Uno degli effetti più suggestivi da implementare è il Parallax Scrolling, un’animazione che fa muovere gli sfondi a velocità diverse, creando un senso di profondità ed eleganza. In questo articolo scoprirai come realizzarlo in modo semplice, utilizzando HTML, CSS e un pizzico di JavaScript.
Indice dei contenuti
- Cos’è il Parallax Scrolling?
- Perché utilizzarlo?
- Struttura di base: HTML
- Stile essenziale: CSS
- Animazione e logica: JavaScript
- Ottimizzazione per prestazioni
- Conclusione
1. Cos’è il Parallax Scrolling?
Il Parallax Scrolling è un effetto visivo nel quale lo sfondo (o alcuni elementi) si muovono a una velocità diversa rispetto al contenuto in primo piano. Questo crea un’illusione ottica di profondità, rendendo la pagina più dinamica e coinvolgente.
2. Perché utilizzarlo?
- Cattura l’attenzione: aggiunge un tocco di creatività al tuo sito, distinguendolo da altri design più statici.
- Esperienza utente: l’animazione fluida incuriosisce, incoraggiando gli utenti a scorrere la pagina fino in fondo.
- Storytelling: perfetto per presentazioni più narrative, dove l’utente viene guidato in un percorso visivo.
3. Struttura di base: HTML
Crea un file index.html e aggiungi una struttura essenziale. È importante definire alcune sezioni o elementi che avranno l’effetto parallax.
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Effetto Parallax Scrolling con JavaScript</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Sezione Hero con parallax -->
<section class="parallax-container">
<div class="parallax-bg" id="parallax-bg"></div>
<h1>Benvenuto nel mondo del Parallax!</h1>
</section>
<!-- Contenuto di testo -->
<section class="content-section">
<h2>Che cos’è il Parallax Scrolling?</h2>
<p>
Il Parallax Scrolling è una tecnica di web design che fa muovere background e contenuti in primo piano a velocità diverse.
</p>
</section>
<!-- Un’altra sezione con un’immagine e effetto parallax -->
<section class="parallax-container">
<div class="parallax-bg" id="parallax-bg2"></div>
<h2>Prova a scorrere ancora!</h2>
</section>
<!-- Sezione finale -->
<section class="content-section">
<h2>Grazie per aver visitato la demo!</h2>
<p>Ora sai come impostare un effetto Parallax Scrolling con JavaScript.</p>
</section>
<script src="script.js"></script>
</body>
</html>
4. Stile essenziale: CSS
Crea un file styles.css e aggiungi regole basilari per dimensionare le sezioni e posizionare correttamente i background.
/* Reset base */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
color: #333;
line-height: 1.6;
}
/* Contenitore parallax */
.parallax-container {
position: relative;
width: 100%;
height: 100vh; /* Imposta l'altezza a pieno schermo */
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.parallax-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
transform: translateZ(0); /* Aiuta con le prestazioni */
}
/* Primo sfondo */
#parallax-bg {
background-image: url('https://via.placeholder.com/1920x1080/ffa07a/ffffff?text=Parallax+1');
}
/* Secondo sfondo */
#parallax-bg2 {
background-image: url('https://via.placeholder.com/1920x1080/20b2aa/ffffff?text=Parallax+2');
}
.parallax-container h1,
.parallax-container h2 {
color: #fff;
z-index: 1; /* Sovrappone il testo al background */
}
/* Sezioni di contenuto */
.content-section {
padding: 60px;
text-align: center;
}
5. Animazione e logica: JavaScript
Crea un file script.js per gestire l’effetto. L’idea è calcolare la posizione dello scroll e modificare la transform dei background di conseguenza.
// Selezioniamo gli elementi su cui applicare l'effetto
const parallaxBg = document.getElementById('parallax-bg');
const parallaxBg2 = document.getElementById('parallax-bg2');
// Funzione per calcolare lo spostamento
function handleScroll() {
// Valore di scroll corrente
let scrollTop = window.pageYOffset;
// Calcolo di spostamento per ciascun background
// Più il valore è alto, più lento sarà lo spostamento rispetto allo scroll
let offset1 = scrollTop * 0.5;
let offset2 = scrollTop * 0.3;
// Applica la trasformazione
// translate3d aiuta con le prestazioni su diversi dispositivi
parallaxBg.style.transform = `translate3d(0px, ${offset1}px, 0px)`;
parallaxBg2.style.transform = `translate3d(0px, ${offset2}px, 0px)`;
}
// Aggiunge l’evento di scroll
window.addEventListener('scroll', handleScroll);
Spiegazione veloce
scrollTop: la quantità di pixel già scrollata.offset1eoffset2: due coefficienti diversi per differenziare la velocità di movimento.transform: translate3d(...): muove l’elemento verticalmente, creando l’effetto parallax.
6. Ottimizzazione per prestazioni
- Richiama la funzione di scroll: già nel codice associamo l’evento
scrollsolo alla finestra, ma se hai molte sezioni parallax, valuta se usare un Intersection Observer per ottimizzare ulteriormente. - Usa immagini compresse: riduci la dimensione delle immagini di background per un caricamento più rapido.
- Evita setInterval: l’evento
scrollè più performante quando gestito correttamente, evita timer o polling continui.
7. Conclusione
Hai visto come creare facilmente un effetto Parallax Scrolling con HTML, CSS e JavaScript. Ora non ti resta che sperimentare: cambia le immagini, i colori e i coefficienti di velocità per creare soluzioni sempre più accattivanti. Buon divertimento!
Hai trovato utile questo Articolo? Continua a seguire Cyberalchimista sui social (@cyberalchimista) per altri tutorial e consigli sullo sviluppo web! Se hai domande o vuoi condividere i tuoi progetti contattaci.
