Come realizzare semplice effetto di Parallax Scrolling.

Buon giorno cari amici. Oggi parallasse Scrolling è diventato una sorta di tendenza, e voglio farvi vedere  una semplice realizzazione dell'effetto. La tecnica si basa sulla velocita di cambiamento di  proprietà background-position. Effetto di Parallax Scrolling sta nel fatto che lo sfondo si muove più lento rispetto al contenuto.

Come realizzare Effetto di Parallax Scrolling

HTML markup.

Creare due blocchi con attributi "data-type" e "data-speed"

<section id="home" data-type="background" data-speed="10" class="pages">
         <article>Semplice tecnica di  Parallax Scrolling</article>
</section>
<section id="about" data-type="background" data-speed="10" class="pages">
         <article>Semplice tecnica di  Parallax Scrolling</article>
</section>

Per controllare i valori di velocità e posizione in JavaScript, attributi "data-type" vengono utilizzati come attributi chiave nel trasferimento di necessarie  parametri.

Stili CSS delle sezioni
Aggiungiamo immagini di sfondo per gli elementi con id #home e #about

#home {
background: url(home-bg.jpg) center 0 repeat fixed; min-height: 1200px;
}
#about {
background: url(about-bg.jpg) center 0 repeat min-height: 1200px;
}

home-bg.jpg

home bg

about-bg.jpg

about bg

Ora vediamo di stilizzare blocchi e posizionare le nostre immagini di sfondo :

#home {
  background: url(home.jpg) center 0 repeat fixed; min-height: 1000px;
  height: 1000px;
  margin: 0 auto;
  width: 100%;
  max-width: 1920px;
  position: relative;
}
#home article {
  height: 458px;
  position: absolute;
  text-align: center;
  top: 300px;
  width: 100%;
}
#about {
  background: url(about.jpg) center 0 repeat fixed; min-height: 1000px;
  height: 1000px;
  margin: 0 auto;
  width: 100%;
  max-width: 1920px;
  position: relative;
  -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
  box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
#about article {
  height: 458px;
  position: absolute;
  text-align: center;
  top: 300px;
  width: 100%;
}

Lo script che gestira il nostro Parallax Scrolling

 

$(document).ready(function(){
    $window = $(window);// impostiamo la finesta che vera presa come riferimento dello scrolling puo essese anche una classe di un div a posto di window
    $('section[data-type="background"]').each(function(){
      var $bgobj = $(this); // creare oggetto
    });
});

Aggiungiamo la funzione .scroll () all'interno di .each() , che viene richimata durante lo scorrimento:

$(document).ready(function(){
    $('section[data-type="background"]').each(function(){
      var $bgobj = $(this); // creare oggetto
      $(window).scroll(function() {
      ...   
      });
    });
});

Calcolare la coefficiente di variazione della posizione di sfondo durante lo scorrimento:
var yPos = -($(window).scrollTop() / $bgobj.data('speed'));//yPos con segnio negativo per lo scorimento andra in alto 

Se la barra dello scorimento laterale  si abbassa per 200px, e il valore dal atributo data-speed abbiamo segnato come 10(guarda inizio del articolo)lo sfondo risale per 20 px. Coefficiente del cambio della posizione dello sfondo è uguale al posizione dello scrolling  ($window.scrollTop();)diviso per il valore del atributo  “data-speed”
2

Inserire il valore della variabile background-position e assegnare stili a coords:

var coords = 'center '+ yPos + 'px';
$bgobj.css({ backgroundPosition: coords });

Codice finale:

$(document).ready(function(){
   $window = $(window);
    $('section[data-type="background"]').each(function(){
        var $bgobj = $(this); // creare oggetto
        $(window).scroll(function() {
            var yPos = -($window.scrollTop() / $bgobj.data('speed')); // calcolo coefficiente  
            // assegnare un valore a background-position nel nostro caso "center" puo essere in percentuale per esempio a 50%
            var coords = 'center '+ yPos + 'px';
            // Creazione effetto Parallax Scrolling muovere lo sfondo
            $bgobj.css({ backgroundPosition: coords });
        }); //fine scorimento finestra
    });
});

non dimenticare di agiungere la biblioteca jQuery al vostro sito

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

 

Vediamo il codice finale della pagina di Parallax Scrolling

<!DOCTYPE html>
<html lang="it">
    <head>
        <meta charset="utf-8" />
        <title>Parallax Scrolling </title>
        
         
        <!-- JS Code -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <!-- CSS Code -->
        <style>
#home {
  background: url(home-bg.jpg) center 0 repeat fixed; min-height: 1000px;
  height: 1000px;
  margin: 0 auto;
  width: 100%;
  max-width: 1920px;
  position: relative;
  
}
#home article {
  height: 458px;
  position: absolute;
  text-align: center;
  top: 300px;
  width: 100%;
  font-weight:bold;
  font-size:42px;
  color:#FFFFFF;
}
#about {
  background: url(about-bg.jpg) center 0 repeat fixed; min-height: 1000px;
  height: 600px;
  margin: 0 auto;
  width: 100%;
  max-width: 1920px;
  position: relative;
  -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
  box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
#about article {
  height: 458px;
  position: absolute;
  text-align: center;
  top: 300px;
  width: 100%;
  font-weight:bold;
  font-size:60px;
  color:#FFFFFF;
}
        </style>
        
  </head>
  <body>
        <section id="home" data-type="background" data-speed="10" class="pages">
                <article>Semplice tecnica di  Parallax Scrolling</article>
        </section>
        <section id="about" data-type="background" data-speed="10" class="pages">
                 <article>Semplice tecnica di  Parallax Scrolling</article>
        </section>
                  <script >
                  $(document).ready(function(){
                   $window = $(window);
                    $('section[data-type="background"]').each(function(){
                        var $bgobj = $(this); // creare oggetto
                        $(window).scroll(function() {
                            var yPos = -($window.scrollTop() / $bgobj.data('speed')); // calcolo coefficiente  
                            // assegnare un valore a background-position nel nostro caso "center" puo essere in percentuale per esempio a 50%
                            var coords = 'center '+ yPos + 'px';
                            // Creazione effetto Parallax Scrolling muovere lo sfondo
                            $bgobj.css({ backgroundPosition: coords });
                        }); //fine scorimento finestra
                    });
                });
                  </script>
        </body>
  </html>

E vediamo cosa abbiamo realizzato.

Vorei anche notare che in questo esemio finale ho creato un altro <div> rachiudendo in esso tutto il codice e ho impostato la sua largezza a 500px, e repetivamente nel codice di jQuery come riferimendo della finestr del brovse ho inserito la classe di questo div 

.finestra{width:500px;}//
//jquery
$(document).ready(function(){
                   $window = $(.finestra);

Semplice tecnica
di Parallax Scrolling
Semplice tecnica
di Parallax Scrolling

 

Letto 1854 volte