Maggio 2018

Vuoi realizzare un semplice effetto parallasse? Non c’è bisogno di utilizzare Jquery ma è sufficiente conoscere qualche regola css. L’effetto è ottimo e hai il vantaggio di non appesantire la pagina con con codice ulteriore.

Il segreto sta nell’aggiungere un’immagine in background in un contenitore con una altezza specifica e ben definita. Inoltre devi utilizzare la seguente regola css:

img{
background-attachments: fixed;
}

Questo serve per creare l’effetto parallasse che lascia l’immagine in background fissa, mentre permette di far scorrere le altre sezioni e le immagini al di sopra con velocità differenti.

Le altre proprietà sono usate per centrare e scalare le immagini perfettamente.

img {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

In questo esempio usiamo le percentuali e non i pixel in modo da impostare l’immagine esattamente uguale alla larghezza dello schermo e quindi impostiamo l’altezza del contenitore parallax al 100%.
Molto importante è applicare l’altezza pari al 100% sia al tagche al tag.

Il tag “background-attachment: fixed” crea alcuni problemi ad alcuni dispositivi mobili. Si può ovviare a questo utilizzando le media queries e disattivando l’effetto parallasse con la seguente proprietà:

@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}

Per scaricare la risorsa che ho creato per te, per favore inserisci nome ed email.
Ti invierò il link nell’email che inserirai nel modulo qui sotto.

— SCARICA LA RISORSA “Come realizzare l’effetto parallasse con i Css”—

Name *

Email *

In questo video-tutorial vediamo un’altro modo di utilizzare l’effetto parallasse per creare un effetto scrolling pagina accattivante con gli oggetti e gli sfondi che fanno un’azione particolare. In questo articolo sono elencati tutti i tipi di plug-in che possiamo trovare ed utilizzare per creare effetti particolari.

Io ho scelto il plugin MultiScroll.js, realizzato da Alvaro Trigo, poiché crea un effetto di divisione della pagina verticale nello scrolling per passare da una sezione all’altra.

Con questo plugin è possibile modificare ed impostare diverse proprietà importanti come la velocità, il tipo di easing, le opzioni di scrolling della tastiera e molte altre proprietà in modo da poter customizzare l’effetto di cui si ha bisogno.

Ecco l’esempio creato dello sviluppatore del plug-in e che ho cercato di realizzare per voi nella risorsa che ho caricato sul mio blog.

Per scaricare la risorsa che ho creato per te, per favore inserisci nome ed email.
Ti invierò il link nell’email che inserirai nel modulo qui sotto.

— SCARICA LA RISORSA “Utilizza MultiScroll.js per realizzare un effetto scrolling accattivante”—

Name *

Email *