Creare effetto Parallasse con CSS3

Creare effetto Parallasse con CSS3
Freia

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.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

php
Up Next:

Trovare ed estrarre estensione file con php

Trovare ed estrarre estensione file con php