Come realizzare l’effetto parallasse con i Css

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”—

Nome *

Email *

alederobertis75
info@alessandraderobertis.it
1 Comment
  • Kelpayops
    Pubblicato alle 02:58h, 07 Febbraio Rispondi

    Viagra Bestellen Dhl Uti Keflex [url=http://ausgsm.com][/url] What Do You Use Amoxicillin For Can I Take Expired Amoxicillin Pills Usa No Subscription Pharmacy [url=http://cheapcheapvia.com]generic viagra[/url] Best Prices For On Line Levitra Find Generic Clobetasol Low Price Online Buy Brand Name Wellbutrin Xl Cheap Levitra Cialis Cost Cialis Rezeptfrei Kaufen Paypal [url=http://cialusa.com]cialis[/url] Swollen Glands And Amoxicillin Traductor Propecia Viagra Klappt Nicht Amoxicillin Allergy Symptoms Org Viagra Generico Costo [url=http://4rxday.com]cialis 5 mg[/url] Baclofen 25mgachat Baclofen Baclofene Dependance Non Prescription Tadalafil [url=http://ordercheapvia.com]viagra[/url] Levitra Dispersion Bucal

Pubblica un Commento