L'effetto parallasse è una tecnica con cui creare un senso di profondità e movimento su una pagina web. Questo effetto visivo si ottiene facendo scorrere gli sfondi delle sezioni del sito web a velocità diverse rispetto ai contenuti in primo piano. Creando così un'esperienza visiva dinamica. L'effetto parallasse può rendere una pagina web molto più interessante e coinvolgente, attirando l'attenzione degli utenti e migliorando la loro esperienza di navigazione.
Come realizzare un effetto parallasse
Realizzare un effetto parallasse può sembrare complicato ma con l'uso di HTML e CSS è possibile ottenere risultati sorprendenti. Senza la necessità di utilizzare JavaScript o altre tecnologie. In questa guida mostreremo come creare un effetto parallasse multilivello che darà vita alle tue pagine web.
Seguendo i passaggi illustrati imparerai a costruire una struttura HTML ben organizzata e a stilizzare gli elementi con CSS per ottenere l'effetto desiderato. Attraverso l'uso di tecniche di posizionamento e trasformazione, sarai in grado di creare sezioni del tuo sito che sembrano muoversi a velocità diverse mentre l'utente scorre la pagina. Creando così un'impressione di profondità.
Struttura di base in HTML
La struttura di base del file HTML per creare un effetto parallasse è composta da una serie di sezioni, rappresentate da elementi div che formano i diversi livelli dell'effetto stesso. Ogni sezione è concepita per rappresentare un "piano" differente della pagina web, contribuendo a creare l'illusione di profondità e movimento. Questo effetto viene ottenuto grazie alla posizione assoluta e alla disposizione verticale delle sezioni che consente loro di scorrere a velocità differenti rispetto al contenuto. All'interno di ciascuna di queste sezioni troviamo un elemento div con la classe fixed.
Questo elemento è fissato al centro della finestra del browser. La posizione fissa implica che il contenuto rimanga fermo sullo schermo mentre si scorre la pagina, creando così l'illusione che gli sfondi delle sezioni si muovano a velocità differenti.
Ogni sezione ha uno stile unico definito tramite CSS che include attributi come colore di sfondo, ombre interne e z-index. Questi stili non solo migliorano l'estetica della pagina, aiutano anche a distinguere i diversi livelli dell'effetto parallasse. L'uso di colori di sfondo contrastanti e ombre interne aggiunge ulteriore profondità visiva, rendendo ogni sezione distintiva e contribuendo all'effetto globale di movimento e dinamismo.
Inoltre, l'uso di clip: rect(0, auto, auto, 0); nella definizione delle sezioni garantisce che il contenuto non esca dai limiti definiti. La combinazione di questi stili CSS con le proprietà di posizionamento fisso e assoluto crea un'esperienza di scorrimento fluida.
Ogni sezione è dotata anche di un z-index che determina l'ordine di sovrapposizione delle sezioni, garantendo che quelle superiori appaiano sopra quelle inferiori. Questo è essenziale per mantenere la corretta stratificazione visiva mentre l'utente scorre la pagina.
Tale architettura modulare consente una grande flessibilità nella progettazione della pagina web. Puoi aggiungere, rimuovere o modificare le sezioni per personalizzare l'effetto parallasse in base alle tue esigenze specifiche. Ad esempio, potresti aggiungere immagini di sfondo, animazioni CSS o altri elementi interattivi per rendere ogni sezione unica e aumentare ulteriormente l'appeal visivo del tuo sito web.
Il codice HTML e CSS
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Effetto parallasse con HTML e CSS</title>
<style>
@import 'https://fonts.googleapis.com/css?family=Sintony';
* {
box-sizing: border-box;
}
body {
background: #222;
padding: 0;
margin: 0;
font-family: "Sintony", sans-serif;
font-weight: 300;
font-size: 13px;
text-transform: uppercase;
color: #000;
}
.section {
text-align: center;
position: absolute;
width: 100%;
height: 100vh;
letter-spacing: 4px;
overflow: hidden;
clip: rect(0, auto, auto, 0);
}
.section .fixed {
overflow: hidden;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Sezioni colorate per l'effetto parallasse */
.section:nth-child(1) { background-color: #e74c3c; top: 0; }
.section:nth-child(2) { background-color: #3498db; top: 100vh; }
.section:nth-child(3) { background-color: #2ecc71; top: 200vh; }
.section:nth-child(4) { background-color: #9b59b6; top: 300vh; }
.section:nth-child(5) { background-color: #f1c40f; top: 400vh; }
.section:nth-child(6) { background-color: #e67e22; top: 500vh; }
.section:nth-child(7) { background-color: #ecf0f1; top: 600vh; }
.section:nth-child(8) { background-color: #95a5a6; top: 700vh; }
.section:nth-child(9) { background-color: #34495e; top: 800vh; }
.section:nth-child(10) { background-color: #000; top: 900vh; }
</style>
</head>
<body>
<div class="section">
<div class="fixed">
<h1 class="large">Lorem Ipsum Dolor</h1>
<p>Parallax Effect Example</p>
</div>
</div>
<div class="section">
<div class="fixed">
<h1 class="large">Effetto Parallasse <br/> con HTML e CSS</h1>
<p>Guida passo a passo</p>
</div>
</div>
<!-- Aggiungi altre sezioni qui -->
</body>
</html>
Stile CSS per l'effetto parallasse
L'effetto parallasse si ottiene posizionando le sezioni della pagina in modo assoluto rispetto allo sfondo. Mentre i loro contenuti rimangono fissi nella loro posizione originale.
Ciò significa che durante lo scorrimento della pagina il contenuto di ogni sezione resta visibile in modo prominente, contrastando con il movimento dello sfondo che si sposta a una velocità differente.
Questa tecnica non solo aggiunge profondità e dimensione alla presentazione del sito web ma anche una sensazione di fluidità e interattività mentre l'utente esplora il contenuto. È particolarmente efficace nel creare un'esperienza utente coinvolgente su siti di storytelling, landing page o in qualsiasi contesto in cui si desidera enfatizzare la sequenza di informazioni in modo chiaro e accattivante. È possibile regolare la velocità del movimento parallasse e l'intensità dell'effetto per adattarsi al tono e allo stile del sito web.
body {
background: #222;
padding: 0;
margin: 0;
font-family: "Sintony", sans-serif;
font-weight: 300;
font-size: 13px;
text-transform: uppercase;
color: #000;
}
.section {
text-align: center;
position: absolute;
width: 100%;
height: 100vh;
letter-spacing: 4px;
overflow: hidden;
clip: rect(0, auto, auto, 0);
}
.section .fixed {
overflow: hidden;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Colori e posizionamento delle sezioni:
Per creare l'effetto di scorrimento, ogni sezione viene posizionata a 100vh di distanza dalla precedente:
.section:nth-child(1) { background-color: #e74c3c; top: 0; }
.section:nth-child(2) { background-color: #3498db; top: 100vh; }
.section:nth-child(3) { background-color: #2ecc71; top: 200vh; }
.section:nth-child(4) { background-color: #9b59b6; top: 300vh; }
.section:nth-child(5) { background-color: #f1c40f; top: 400vh; }
.section:nth-child(6) { background-color: #e67e22; top: 500vh; }
.section:nth-child(7) { background-color: #ecf0f1; top: 600vh; }
.section:nth-child(8) { background-color: #95a5a6; top: 700vh; }
.section:nth-child(9) { background-color: #34495e; top: 800vh; }
.section:nth-child(10) { background-color: #000; top: 900vh; }Aggiungere contenuto alle sezioni
Ogni sezione del sito è strutturata per includere un elemento con la classe fixed, il quale ha il compito di posizionare il contenuto esattamente al centro della sezione stessa. Questo approccio offre una grande flessibilità nel modo in cui puoi arricchire le tue pagine web: puoi aggiungere testi descrittivi per fornire informazioni dettagliate, immagini per rendere visivamente attraenti le tue sezioni, o qualsiasi altro tipo di contenuto che ritieni sia più adatto per comunicare efficacemente con i visitatori del tuo sito.
Centrando dinamicamente il contenuto in ciascuna sezione garantisci che ogni elemento sia visibile e ben integrato nel layout della pagina
Esempio di contenuto per una sezione:
<div class="section">
<div class="fixed">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>Il codice HTML e CSS completo e aggiornato
<title>Effetto Parallasse con HTML e CSS</title>
@import 'https://fonts.googleapis.com/css?family=Sintony';
* {
box-sizing: border-box;
}
h1{ font-size: 50px;}
p{ font-size: 18px;}
body {
background: #222;
padding: 0;
margin: 0;
font-family: "Sintony", sans-serif;
font-weight: 300;
font-size: 13px;
text-transform: uppercase;
color: #000;
}
header {
background-color: #fff;
padding: 0;
margin: 0;
}
.section {
text-align: center;
position: absolute;
width: 100%;
height: 100vh;
letter-spacing: 4px;
overflow: hidden;
clip: rect(0, auto, auto, 0);
}
.section .fixed {
overflow: hidden;
position: fixed;
top: 50%;
left: 50%;
}
.section .white {
color: #fff;
}
.section:nth-child(1) {
background-color: #e74c3c;
color: #fff;
top: 0;
z-index: 1;
}
.section:nth-child(1) .fixed {
transform: translate(-50%, -50%);
}
.section:nth-child(2) {
box-shadow: inset 0 1px 80px rgba(0, 0, 0, 0.14);
background-color: #3498db;
color: #fff;
top: 100vh;
z-index: 2;
}
.section:nth-child(2) .fixed {
transform: translate(-50%, -50%);
}
.section:nth-child(3) {
box-shadow: inset 0 1px 80px rgba(0, 0, 0, 0.14);
background-color: #2ecc71;
color: #fff;
top: 200vh;
z-index: 3;
}
.section:nth-child(3) .fixed {
transform: translate(-50%, -50%);
}
.section:nth-child(4) {
box-shadow: inset 0 1px 80px rgba(0, 0, 0, 0.14);
background-color: #9b59b6;
color: #fff;
top: 300vh;
z-index: 4;
}
.section:nth-child(4) .fixed {
transform: translate(-50%, -50%);
}
.section:nth-child(5) {
box-shadow: inset 0 1px 80px rgba(0, 0, 0, 0.14);
background-color: #f1c40f;
color: #fff;
top: 400vh;
z-index: 5;
}
.section:nth-child(5) .fixed {
transform: translate(-50%, -50%);
}
.section:nth-child(6) {
box-shadow: inset 0 1px 80px rgba(0, 0, 0, 0.14);
background-color: #e67e22;
color: #fff;
top: 500vh;
z-index: 6;
}
.section:nth-child(6) .fixed {
transform: translate(-50%, -50%);
}
.section:nth-child(7) {
box-shadow: inset 0 1px 80px rgba(0, 0, 0, 0.14);
background-color: #ecf0f1;
color: #000;
top: 600vh;
z-index: 7;
}
.section:nth-child(7) .fixed {
transform: translate(-50%, -50%);
}
.section:nth-child(8) {
box-shadow: inset 0 1px 80px rgba(0, 0, 0, 0.14);
background-color: #95a5a6;
color: #fff;
top: 700vh;
z-index: 8;
}
.section:nth-child(8) .fixed {
transform: translate(-50%, -50%);
}
.section:nth-child(9) {
box-shadow: inset 0 1px 80px rgba(0, 0, 0, 0.14);
background-color: #34495e;
color: #fff;
top: 800vh;
z-index: 9;
}
.section:nth-child(9) .fixed {
transform: translate(-50%, -50%);
}
.section:nth-child(10) {
background-color: #000;
color: #fff;
top: 900vh;
z-index: 10;
}
.section:nth-child(10) .fixed {
transform: translate(-50%, -50%);
}
<div class="section">
<div class="fixed">
<h1 class="large">Effetto Parallasse <br /> con HTML e CSS</h1>
<p>Guida passo a passo</p>
</div>
</div>
<div class="section">
<div class="fixed">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.</p>
</div>
</div>
<div class="section">
<div class="p fixed">
<p>Curabitur laoreet, mauris vel blandit fringilla, leo elit rhoncus nunc, nec scelerisque elit eros eget sapien. Proin eget ligula id arcu vulputate semper.</p>
</div>
</div>
<div class="section">
<div class="p fixed">
<p>Donec ultricies, turpis eu fringilla condimentum, eros dui sagittis ligula, a congue lectus turpis nec erat.</p>
</div>
</div>
<div class="section">
<div class="p fixed">
<p>Quisque finibus lacus sapien, eu tincidunt velit pretium et. Aenean ullamcorper, mi ut blandit tincidunt, dui augue condimentum metus, et imperdiet augue.</p>
</div>
</div>
<div class="section">
<div class="p fixed">
<p>Aliquam erat volutpat. Donec gravida ullamcorper velit, in suscipit elit.</p>
</div>
</div>
<div class="section">
<div class="p fixed">
<p>Ut bibendum metus vel tincidunt placerat. Curabitur placerat malesuada orci, a venenatis libero pharetra at.</p>
</div>
</div>
<div class="section">
<div class="p fixed">
<p>Pellentesque ultricies, risus id convallis condimentum, elit mi cursus arcu, vel facilisis orci felis sit amet ante.</p>
</div>
</div>
<div class="section">
<div class="p fixed">
<p>Suspendisse potenti. Nunc a mi suscipit, suscipit risus eu, sollicitudin felis. Nam ac enim eget nunc cursus fermentum.</p>
</div>
</div>
<div class="section">
<p class="fixed white">A presto :)</p>
</div>
Conclusioni
Abbiamo visto come sia possibile creare un effetto parallasse utilizzando HTML e CSS con pochi e semplici passaggi. Questo esempio di base può essere esteso e personalizzato ulteriormente per creare layout più complessi e interattivi. L'effetto parallasse aggiunge profondità e dinamismo alle tue pagine web, migliorando l'esperienza utente e rendendo il sito più accattivante e coinvolgente. Prova a sperimentare con diversi stili e contenuti per vedere come puoi adattare questa tecnica alle tue esigenze.
