Molti di voi si staranno chiedendo come creare un effetto Parallax sulle proprie pagine Web, cercando Snippet o includendo Plugin jQuery per poterlo fare.
E se vi dicessi che non vi serve tutto ciò e che per creare un effetto parallasse vi bastano pochissime righe di CSS?
Cos’è l’effetto Parallasse:
Questo effetto viene applicato solitamente agli sfondi dei contenitori di testo, serve a simulare lo scorrimento dello sfondo del contenitore come a creare un effetto multi-layer, serve a dare dinamicità ed elasticità alla pagina Web e permette inoltre di avere una visione più completa dell’immagine di Background in funzione della posizione di scorrimento.. è una tecnica di Web Design già utilizzata da tempo che però non perde mai il suo fascino.
Come applicarlo:
Per applicare l’effetto Parallax sono necessarie pochissime righe di CSS, l’esempio quì riportato è già in versione Responsive.
Un requisito necessario per poter dare vita a questo effetto è avere un’immagine da mettere come sfondo molto larga ed alta in pixel, in modo da potersi adattare bene su tutte le views.
Dichiariamo la larghezza,l’altezza,lo sfondo e la posizione,e l’adattibilità del container:
#miodiv{
width:100%;
height:350px;
background:url(urlsfondo.jpg) center center;
background-attachment:fixed;
background-size:cover;
}
In questo codice abbiamo definito un contenitore con larghezza pari al 100%, alto 350px, con lo sfondo orientato al centro sia verticalmente che orizzontalmente e abbiamo definito un importante parametro: l’adattamento su views diverse.
Infatti anche se avremo uno schermo più piccolo la nostra immagine di sfondo coprirà sempre il contenitore nel cui è applicata.
Adesso ci basta creare l’html e poterci divertire dentro il nostro contenitore
<div id="miodiv"></div>
Dentro il tag HTML possiamo inserire altri box per riempire il contenuto e dare un senso al nostro sfondo.
Dove sta il trucco:
La regola che dà il movimento e la dinamicità allo sfondo è semplicemente una: background-attachment: fixed;
Tutto il resto sono regole di Routine per creare il contenitore e renderlo Responsive, quindi se il vostro intento è creare un semplice effetto Parallasse con CSS è inutile includere strani Plugin jQuery e appesantire ulteriormente il codice.
Certo questo effetto in CSS non vi darà la stessa possibilità di personalizzazione di un Plugin ma è sicuramente un ottimo spunto dal quale poter partire.
L'articolo Creare effetto Parallasse con CSS3 sembra essere il primo su Target Web.it.
