Una semplice tecnica di Parallax Scrolling

() translation by (you can also view the original English article)

Parallax Scrolling è una tecnica interessante, dove, durante lo scorrimento, le immagini di sfondo scorrono più lente rispetto al contenuto in primo piano, creando l'illusione di profondità 3D. Siccome ho pensato di ri-progettare il mio sito personale, il mio primo obiettivo era di scrivere codice più breve e più semplice per ottenere massima suggestione! Ti mostrerò come ho fatto.

Se state cercando un modo rapido per iniziare con un modello di base per il vostro tema, trovare un semplice tema Parallax potrebbe essere una buona opzione. O sfogliare i nostri template a pagina singola. Troverete anche i fornitori di servizi su Envato Studio che potranno creare siti parallax scrolling per voi.

In questo tutorial, ti insegnerò la più semplice tecnica di Parallax Scrolling che hai mai visto!

Passaggio 1: Il Markup

Questa tecnica ruota intorno al controllo della velocità dell'immagine di sfondo. Quindi cominciamo con il markup HTML, creando due sezioni con gli attributi obbligatori: "data-type" e "data-speed". Non ti preoccupare; li spiegherò più avanti.

                <section id="home" data-type="background" data-speed="10">                            
                </section>   
                    
                <section id="about" data-type="background" data-speed="10">
                </section>

Sto usando il tag <section> con gli attributi data-type e data-speed, che sono stati introdotti in HTML5. Questo rende il markup HTML più pulito e più facile da leggere.

Secondo la specifica per gli attributi di dati personalizzati, qualsiasi attributo che inizia con data- sarà trattato come un'area di archiviazione per i dati privati. Inoltre, questo non influenzerà il layout o la presentazione.

Dal momento che tutto ciò di cui abbiamo bisogno è controllare la velocità delle immagini di sfondo, useremo data-type="background" and data-speed="10" come attributi chiave per specificare i parametri necessari.

So cosa stai pensando: sei preoccupato per IE. Niente paura; ho una soluzione anche per questo! Ne parleremo tra poco.

Successivamente, aggiungiamo il contenuto all'interno del tag <article> all'interno di ciascun <section>.

                <section id="home" data-type="background" data-speed="10" class="pages">     
                         <article>I am absolute positioned</article>
                    </section>   
                    
                <section id="about" data-type="background" data-speed="10" class="pages">
                         <article>Simple Parallax Scroll</article>
                </section>

Quello che stiamo cercando di fare qui sta è rendere lo scroll di <section> dello sfondo più lento del suo contenuto, vale a dire <article>. Questo ci aiuterà a creare un illusione di parallax. Prima di passare alla magia di jQuery, aggiungiamo le immagini di sfondo nel nostro CSS per ogni <section>.

                                
                #home { 
                background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;
                }
                
                #about { 
                background: url(about-bg.jpg) 50% 0 no-repeat min-height: 1000px;  
                }

Aggiunti gli sfondi per entrambe le sezioni, dovrebbe assomigliare a:

Aggiungiamo alcuni CSS per stilizzare e per ravvivare la tua pagina!

                #home { 
                  background: url(home-bg.jpg) 50% 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: 150px; 
                  width: 100%; 
                }
                
                #about { 
                  background: url(about-bg.jpg) 50% 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: 150px; 
                  width: 100%; 
                }

Ora dovrebbe apparire come questo...

Passaggio 2: Il codice magico

Sì, è così; qui è dove inizia la magia! Utilizzando jQuery, potremo iniziare con il metodo standard document.ready() per assicurarci che la pagina è stata caricata ed è pronta per essere modificata.

1	$(document).ready(function(){
2
3
4	});

Questa tecnica ruota intorno al controllo della velocità dell'immagine di sfondo in entrambe le sezioni.

Ora ho bisogno della tua attenzione qui. La prima cosa che accade è che stiamo scorrendo ogni <section> nella pagina, che ha l'attributo data-type="background".

                $(document).ready(function(){
                
                    $('section[data-type="background"]').each(function(){
                      var $bgobj = $(this); // assigning the object
                    }); 
                
                });

Aggiungiamo un'altra funzione, .scroll(), all'interno di .each(), che viene richiamata quando l'utente inizia lo scorrimento.

1	$(window).scroll(function() {
2
3	});

Abbiamo bisogno di determinare fin dove l'utente ha scrollato e quindi dividere il valore per il valore di data-speed, menzionato nel markup.

1	var yPos = -($window.scrollTop() / $bgobj.data('speed'));

$window.scrollTop(): stiamo ottenendo il valore di scorrimento corrente dall'alto. Questo fondamentalmente determina fin dove l'utente ha eseguito lo scrolling. $bgobj.data('speed') si riferisce al data-speed assegnato nel markup e yPos è il valore finale che dobbiamo applicare per lo scorrimento. Tuttavia, sarà un valore negativo, perché dobbiamo spostare lo sfondo nella direzione opposta allo scorrimento dell'utente.

Cerchiamo di indagare un po' più con un esempio:

Nell'immagine sopra, data-speed è 10 e supponiamo che la finestra del browser è stata fatta scorrere 57px. Questo significa 57px diviso per 10 = 5.7px.

                // Put together our final background position
                var coords = '50% '+ yPos + 'px';
                
                // Move the background
                $bgobj.css({ backgroundPosition: coords });

L'ultima cosa che dobbiamo fare è mettere la posizione finale dello sfondo in una variabile. Al fine di mantenere la posizione orizzontale dello sfondo come statico, abbiamo assegnato 50% come sua xPosition. Quindi, abbiamo aggiunto yPos come il yPosition e, infine, assegnate le coordinate di sfondo al nostro <section> sfondo: $bgobj.css ({backgroundPosition: coords});.

Il codice finale sarà simile:

$(document).ready(function(){
    $('section[data-type="background"]').each(function(){
        var $bgobj = $(this); // assigning the object
    
        $(window).scroll(function() {
            var yPos = -($window.scrollTop() / $bgobj.data('speed')); 
            
            // Put together our final background position
            var coords = '50% '+ yPos + 'px';

            // Move the background
            $bgobj.css({ backgroundPosition: coords });
        }); 
    });    
});

Wow, ce l'abbiamo fatta! Provatelo voi stessi.

Fix IE

C'è un ultimo fix: versioni IE più vecchie non possono renderizzare il tag <section> e <article>. E' facile da risolvere, però; useremo la soluzione standard di creazione di elementi, che permette al browser magicamente di riconoscere i tag HTML5.

1	// Create HTML5 elements for IE
2
3	document.createElement("article");
4	document.createElement("section");

Inoltre, abbiamo bisogno di utilizzare un file di reset CSS di base al fine di rendere tutti i browser compatibili. Per fortuna, strumenti, come HTML5 Boilerplate limitano il peso del lavoro per noi, quando si tratta di normalizzazione multibrowser .

E' tutto per questa lezione! Domande o note che vuoi aggiungere? Fammi sapere qui sotto!

E se stai cercando una soluzione rapida con risultati professionali, allora cerca un Tema Parallax e One Page Template disponibili per l'acquisto su ThemeForest.