L'effetto di scrolling parallax è una tecnica visiva che permette di aggiungere profondità e dinamismo a una pagina web. Utilizzandolo puoi fare in modo che gli elementi del sito si muovano a velocità diverse durante lo scorrimento della pagina. Creando un'illusione di profondità tridimensionale.
In questo tutorial vedremo come creare un semplice effetto parallax per regolare la velocità di scorrimento di immagini o altri elementi con HTML e CSS. Che tu sia un principiante o un esperto di sviluppo web, questa guida ti fornirà tutte le informazioni necessarie per implementare facilmente tale effetto nel tuo prossimo progetto.
Parallax: caratteristiche ed utilità
Il parallax scrolling è diventato un effetto popolare nel design web per la sua capacità di rendere le pagine più coinvolgenti e visivamente accattivanti. Esso fa sì che gli elementi di una pagina (come immagini, testi e altri contenuti) si muovano a velocità diverse durante lo scorrimento, creando un'illusione di profondità. In passato, implementare il parallax richiedeva l'uso di JavaScript o librerie esterne. Grazie alle moderne funzionalità di CSS oggi è possibile ottenerlo in modo semplice e veloce.
HTML e CSS per la realizzazione dell'effetto
Per realizzare un semplice effetto parallax, avrai bisogno di HTML e CSS. In HTML dovrai creare la struttura della tua pagina web. Inclusi gli elementi che vuoi animare, come le immagini o i blocchi di testo. Questi saranno inseriti in un contenitore che agirà come la base su cui applicare l'effetto di scorrimento.
In CSS, sfrutterai la proprietà background-attachment insieme ad altre regole per impostare la velocità di scorrimento degli elementi. La chiave del parallax è far sì che alcuni elementi si spostino più lentamente rispetto ad altri mentre la pagina scorre. Con queste due tecnologie potrai realizzare un effetto parallax fluido e interessante senza dover ricorrere a script complessi.
HTML: struttura di base
<body>
<section class="parallax parallax-bg1">
<div class="content">
<h1>Scopri il Parallax</h1>
<p>Un effetto visivo che aggiunge profondità alle tue pagine web.</p>
</div>
</section>
<section class="content-section">
<div class="content">
<h2>Effetto Parallax con Più Livelli</h2>
<p>Un altro livello di profondità può essere creato utilizzando più immagini di sfondo con diverse velocità di scorrimento.</p>
</div>
</section>
<section class="parallax parallax-bg2">
<div class="content">
<h1>Design Visivo Dinamico</h1>
<img src="https://via.placeholder.com/800x600/48C9B0/000000" alt="Design Dinamico" class="parallax-image">
</div>
</section>
<section class="content-section">
<div class="content">
<h2>Variazioni nell'Interazione</h2>
<p>Con il parallax puoi aggiungere interattività senza l'uso di JavaScript, tutto grazie a CSS.</p>
</div>
</section>
</body>Il codice HTML riportato crea una pagina web con un effetto parallax in cui vengono utilizzati diversi livelli di contenuto e immagini di sfondo che si muovono a velocità diverse durante lo scorrimento della pagina. Inizialmente troviamo una prima sezione con parallax (parallax-bg1) che contiene un'immagine di sfondo e del testo. L'immagine di sfondo, grazie alla classe parallax, è impostata per muoversi con un effetto parallax mentre l'utente scorre la pagina. Il testo all'interno della sezione (un titolo h1 e un paragrafo p) rimarrà fisso sopra l'immagine mentre questa si muove. Successivamente troviamo una sezione di contenuto (content-section) che contiene del testo non soggetto all'effetto parallax.
Qui, c'è un titolo h2 e un paragrafo p che spiegano come l'effetto parallax può aggiungere profondità alle pagine web, senza interazione dinamica con lo scorrimento dell'immagine. Proseguendo troviamo una seconda sezione con parallax (parallax-bg2) che utilizza un'altra immagine di sfondo ma, questa volta, contiene anche un'immagine interna oltre al testo.
Come nel primo caso, l'immagine di sfondo si muoverà mentre il testo e l'immagine interna rimarranno fissi. Per finire la seconda sezione di contenuto (content-section) contiene solo del testo che non è influenzato dall'effetto parallax.
CSS: struttura di base
/* Stili di base */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
overflow-x: hidden;
}
h1, h2, p {
color: white;
text-align: center;
margin: 0;
}Quelli sopra mostrati sono gli attributi principali che vengono assegnati alla pagina, in particolare la proprietà overflow-x: hidden impedisce lo scorrimento orizzontale. Utile per evitare che gli elementi fuoriescano dalla pagina.
.parallax {
position: relative;
height: 100vh;
background-size: cover;
background-position: center;
color: white;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
padding: 20px;
}Proseguendo abbiamo la classe degli elementi parallax che con la proprietà position: relative consente di posizionare gli elementi al suo interno in modo relativo. Essi vengono centrati orizzontalmente e verticalmente (flexbox), così come l'immagine di sfondo che copre l'intera area della sezione.
.parallax-bg1,
.parallax-bg2 {
background-image: url('/parallax.jpg');
background-attachment: fixed;
background-position: center center;
background-size: cover;
}
/* Seconda immagine di sfondo con velocità differente */
.parallax-bg2 {
background-image: url('/parallax2.jpg');
}Queste classi sono responsabili per l'immagine di sfondo delle due sezioni mentre background-attachment: fixed crea l'effetto parallax vero e proprio. Facendo in modo che l'immagine di sfondo si muova a una velocità diversa rispetto al contenuto mentre la pagina scorre.
.content {
z-index: 10;
max-width: 80%;
display: inline-block;
}
h1 {
font-size: 3rem;
}
p {
font-size: 1.5rem;
max-width: 600px;
}Questi attributi modificano lo stile del contenuto delle sezioni parallax. In particolare i testi presenti al loro interno, che vengono posizionati con display: inline-block.
.parallax-image {
max-width: 100%;
height: auto;
border: 5px solid white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
}Immagini al posto del testo
La seconda sezione parallax presenta una novità, ovvero l'immagine al posto del testo. Questa viene gestita con le proprietà sopra elencate e mostrerà un bordo bianco e una leggera sfumatura attorno.
.content-section {
padding: 50px 20px;
background-color: #333;
color: white;
text-align: center;
margin: 20px 0;
}
.content-section h2 {
font-size: 2.5rem;
}
.content-section p {
font-size: 1.2rem;
}Infine, le sezioni .content-section sono utilizzate per il contenuto che non è influenzato dall'effetto parallax. Il padding offre un'area interna per il contenuto e il margine separa le sezioni tra di loro.
Questo codice CSS, unito alla parte di HTML, crea una pagina web con un design dinamico che include due sezioni parallax con immagini che si spostano a velocità diverse creando l'effetto di profondità. Le sezioni di contenuto tra le immagini di parallax rimangono statiche e visibili. Il design è responsive, quindi si adatta a dispositivi di dimensioni diverse.
Conclusione
Nell'animazione di seguito l’anteprima del risultato finale che si ottiene dal codice sopra mostrato:
In questa guida, abbiamo creato un effetto parallax avanzato utilizzando HTML e CSS. Abbiamo visto come implementare più livelli di immagini di sfondo che si muovono a velocità diverse per creare un'illusione di profondità. Mentre il contenuto sovrapposto rimane fisso sopra le immagini.
Grazie all'uso delle proprietà CSS come background-attachment: fixed e text-shadow è possibile ottenere un effetto visivo dinamico e accattivante senza l'uso di JavaScript. Con queste tecniche, si può migliorare l'aspetto e l'interattività delle pagine web offrendo un'esperienza utente unica.
