Share
Lo scrolling di parallasse è una tecnica interessante, in cui, quando si scorre, le immagini di sfondo si traducono più lentamente del contenuto in primo piano, creando l'illusione della profondità 3D. Mentre progettavo di riprogettare il mio sito personale, il mio primo obiettivo era scrivere il codice più breve e più semplice per ottenere la massima suggestione! Ti mostrerò come l'ho fatto.
Se stai cercando un modo rapido per iniziare con un modello di base per il tuo tema, trovare un tema Parallax semplice potrebbe essere una buona opzione. Oppure sfoglia i nostri modelli di una pagina. È inoltre possibile trovare fornitori di servizi su Envato Studio che creerà per voi siti di scorrimento parallasse.
In questo tutorial ti insegnerò la tecnica di scorrimento della parallasse più semplice che tu abbia mai incontrato, quindi cerchiamo di approfondire!
Questa tecnica ruota attorno al controllo della velocità dell'immagine di sfondo. Iniziamo quindi con il markup HTML, creando due sezioni insieme agli attributi richiesti: "tipo di dati" e "Dati velocità". Non preoccuparti; Te lo spiegherò dopo.
Sto usando il tag con gli attributi tipo di dati & Dati velocità, che sono stati introdotti in HTML5. Questo rende il codice HTML più pulito e più facile da leggere.
In base alle specifiche per Attributi dati personalizzati, qualsiasi attributo che inizia con dati- verrà trattato come area di archiviazione per i dati privati. Inoltre, questo non influenzerà il layout o la presentazione.
Poiché tutto ciò che dobbiamo fare è controllare la velocità delle immagini di sfondo, le useremo Dati-type = "background" e Dati velocità = "10" come attributi chiave per specificare i parametri necessari.
So cosa stai pensando: sei preoccupato per IE. Mai aver paura; Ho una soluzione anche per questo! Ne discuteremo per un momento.
Successivamente, aggiungiamo il contenuto all'interno di etichetta dentro ciascuno
Sono in posizione assoluta Scroll Parallax semplice
Quello che stiamo tentando di fare qui è fare il
#home background: url (home-bg.jpg) 50% 0 ripetizione fissa; altezza minima: 1000 px; #about background: url (about-bg.jpg) 50% 0 no-repeat min-height: 1000px;
Dopo aver aggiunto sfondi per entrambe le sezioni, dovrebbe essere simile a:
Aggiungiamo un po 'più di CSS per modellare e ravvivare la pagina!
#home background: url (home-bg.jpg) 50% 0 ripetizione fissa; altezza minima: 1000 px; altezza: 1000px; margine: 0 auto; larghezza: 100%; larghezza massima: 1920px; posizione: relativa; #home article height: 458px; posizione: assoluta; allineamento del testo: centro; superiore: 150 px; larghezza: 100%; #about background: url (about-bg.jpg) 50% 0 ripetizione fissa; altezza minima: 1000 px; altezza: 1000px; margine: 0 auto; larghezza: 100%; larghezza massima: 1920px; posizione: relativa; -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; posizione: assoluta; allineamento del testo: centro; superiore: 150 px; larghezza: 100%;
Ora dovrebbe assomigliare a questo ...
Sì, è vero; è qui che inizia la magia! Usando jQuery, inizieremo con lo standard document.ready () metodo per garantire che la pagina sia caricata e sia pronta per essere manipolata.
$ (document) .ready (function () );
Questa tecnica ruota intorno al controllo della velocità dell'immagine di sfondo che esiste in entrambe le sezioni.
Ora ho bisogno della tua attenzione qui. La prima cosa che succede di seguito è che stiamo iterando su ciascuno di essi nella pagina, che ha l'atrribute Dati-type = "background".
Accentsconagua
$ (document) .ready (function () $ ('section [data-type = "background"]'). each (function () var $ bgobj = $ (this); // assegnazione dell'oggetto); ); Aggiungi un'altra funzione, .scorrere(), dentro .ogni(), che viene invocato mentre l'utente inizia a scorrere.
$ (finestra) .scroll (function () );
Dobbiamo determinare quanto l'utente ha fatto scorrere verso l'alto e quindi dividere il valore con Dati velocità valore, menzionato nel markup.
var yPos = - ($ window.scrollTop () / $ bgobj.data ('speed')); $ Window.scrollTop (): stiamo ottenendo il valore di scorrimento corrente dall'alto. Questo fondamentalmente determina quanto l'utente ha fatto scorrere verso l'alto. $ Bgobj.data ( 'velocità') si riferisce a Dati velocità 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 della pergamena dell'utente.
Analizziamo un po 'di più con un esempio:
Nell'immagine sopra, Dati velocità è 10, e supponiamo che la finestra del browser abbia fatto scorrere 57px. Questo significa 57px diviso per 10 = 5.7px.
// Assembla la nostra posizione di sfondo finale var coords = '50% '+ yPos +' px '; // Sposta lo sfondo $ bgobj.css (backgroundPosition: coords);
L'ultima cosa che dobbiamo fare è mettere insieme la nostra posizione di base finale in una variabile. Per mantenere la posizione orizzontale dello sfondo come statica, l'abbiamo assegnata 50% come suo XPOSITION. Quindi, abbiamo aggiunto yPos come il yPosition, e, infine, assegnato le coordinate di sfondo al nostro sfondo: $ bgobj.css (backgroundPosition: coords);.
Il tuo codice finale potrebbe essere simile a:
$ (document) .ready (function () $ ('section [data-type = "background"]'). each (function () var $ bgobj = $ (this); // assegnazione dell'oggetto $ (finestra ) .scroll (function () var yPos = - ($ window.scrollTop () / $ bgobj.data ('speed')); // Unisci la nostra posizione di sfondo finale var coords = '50% '+ yPos +' px '; // Sposta lo sfondo $ bgobj.css (backgroundPosition: coords);););); Sì, ce l'abbiamo fatta! Provalo tu stesso.
C'è un'ultima correzione: IE più vecchio non può rendere il e tag. Questo è facile da risolvere, però; useremo la soluzione standard per la creazione degli elementi, che rende il browser riconoscibile magicamente dai tag HTML5.
// Crea elementi HTML5 per IE document.createElement ("article"); document.createElement ( "sezione"); Inoltre, abbiamo bisogno di utilizzare un file di ripristino CSS di base per far sì che tutti i browser giochino bene. Fortunatamente, gli strumenti, come HTML5 Boilerplate, si prendono cura del peso del lavoro per noi, quando si tratta di normalizzare i browser.
Questo lo fa per questa lezione! Hai domande o note che desideri aggiungere? Fammi sapere di seguito!
E se stai cercando una soluzione rapida con risultati professionali, sfoglia le nostre opzioni Parallax Theme e One Page Template, disponibili per l'acquisto su ThemeForest.
