Obiettivo: Applicare i principi del css per ricreare l’effetto Parallax nello scrolling di immagini.
Pre-requisiti:
HTML #3 CSS
HTML #4 Tre modi per includere un CSS in un file HTML
Teoria
L’effetto parallax è una tecnica di design sempre più utilizzata nella realizzazione di siti web per creare esperienze visivamente accattivanti e dinamiche. Si basa su un’illusione ottica in cui gli elementi di sfondo si muovono più lentamente rispetto agli elementi in primo piano quando si scorre la pagina, dando una sensazione di profondità e tridimensionalità. Questo effetto migliora l’estetica del sito e può guidare l’attenzione dell’utente verso sezioni specifiche, contribuendo a raccontare una storia o enfatizzare determinati contenuti. Tuttavia, è importante utilizzarlo con moderazione, poiché un uso eccessivo può rallentare le prestazioni del sito o distrarre l’utente dall’obiettivo principale.
Codice:
Viene in seguito riportato il codice HTML utile per realizzare l’effetto parallax in una singola immagine.
Nello specifico, nel tag <style> si definisce lo stile per l’elemento con classe .parallax. Sono in seguito riportate le principali proprietà di questa classe:Proprietà dello stile: background-image: . min-height: L. background-attachment: fixed: . background-position: center: L’immagine è centrata. background-repeat: no-repeat: L’immagine non viene ripetuta. background-size: cover: L’immagine occupa l’intera area disponibile, mantenendo le proporzioni.</p>
- Background-image: URL dell’immagine utilizzata come sfondo.
- Min-height: L’altezza minima della sezione è impostata a 750px.
- Background-attachment: fixed Impostando questo valore a fixed, l’immagine di sfondo rimane fissata mentre il contenuto si muove durante lo scrolling, creando l’effetto parallax.
- Background-position: center: L’immagine è centrata
- Background-repeat: no-repeat: L’immagine non viene ripetuta
- Background-size: cover: L’immagine occupa l’intera area disponibile, mantenendo le proporzioni.
