Parallax Scrolling su HTML e CSS con diversi passagi.

Rimanendo sulla tema di Parallax Scrolling ti racconterò e faro anche vedere come realizzare lo stesso effetto con una serie d'immagini che ruotano durante lo scorrimento.
 Un effettodel genere può essere realizzato attraverso i CSS. L'idea è semplice , applicare l'effetto di parallasse per l'immagine di sfondo. Per fare questo, dobbiamo controllare la proprietà CSS background-attachment.

Effetto di Parallax Scrolling su puro CSS e HTML

Markup html dell blocco

Il codice markup HTML è molto semplice: si suseguono blocchi  <div> con la classe .cd-fixed-bg   con la posizione fissa , con altri blocchi  <div> con la classe .cd-scrolling-bg  con impostazioni comuni per lo sfondo, nel nostro caso un semplice colore .

<div>
    <div class="cd-fixed-bg cd-bg-1">
        <h1><!-- meti qua il titolo --></h1>
    </div>
    <div class="cd-scrolling-bg cd-color-2">
        <div class="cd-container">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
            </p>
        </div>
    </div>
</div>

Possiamo crerae  piu di una tale accopiata sulla pagina, come potete vedere nel esempio  sotto l'articolo.

Stili CSS di Parallax Scrolling

Il valore predefinito in tutti i browser  per il background-attachment  è  scroll, il che significa lo scorrimento di sfondo. Se è impostato su fixed, la posizione del nostro disegno sarà fissa. E proprio su questo aspetto che si agira la nostra animazione di Parallax Scrolling.

body, html, main {
    /* important */
    height: 100%;
}
.cd-fixed-bg {
    min-height: 100%;
    background-size: cover;
    background-attachment: fixed;/*uno dei punti chiave */
    background-repeat: no-repeat;
    background-position: center center;
}
.cd-fixed-bg.cd-bg-1 {
  background-image: url("../img/cd-background-1.jpg");
}
.cd-fixed-bg.cd-bg-2 {
  background-image: url("../img/cd-background-2.jpg");
}
.cd-fixed-bg.cd-bg-3 {
  background-image: url("../img/cd-background-3.jpg");
}
.cd-fixed-bg.cd-bg-4 {
  background-image: url("../img/cd-background-4.jpg");
}
.cd-scrolling-bg {
    min-height: 100%;/* se l'effeto non si vede impostare in  px per esempio qui sotto o impostato su 300px per visualizzare immagini fissi * /
}

Provate di realizzare analizzando la fonte che potete scaricare qui sotto una propria pagina HTMl con lo effetto di Parallax Scrolling magari con le vostre foto personali o una pagina dedicata alla vostra famiglia!!!

Alternate Fixed & Scroll Backgrounds

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi, mollitia, repellendus sapiente repudiandae labore rerum amet culpa inventore, modi non.

Scarica fail qui sotto!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi, mollitia, repellendus sapiente repudiandae labore rerum amet culpa inventore, modi non. Quo nisi veritatis vitae nam, labore fugit. Inventore culpa iusto, officia exercitationem. Voluptates quibusdam odit odio incidunt consequatur, consectetur aspernatur optio vitae molestias, quas repellendus fugit ullam culpa, eligendi et dignissimos voluptatibus illum?

E facile provi anche tu!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi, mollitia, repellendus sapiente repudiandae labore rerum amet culpa inventore, modi non.

Condividi la pagina per
sostenere progetto

 

 

Letto 1860 volte