Share
In questo tutorial, il secondo di una serie in due parti, prenderemo la fantastica illustrazione vettoriale basata su "Come creare uno sfondo a scorrimento lungo per un sito web" di Yulia Sokolova e la codificheremo in un sito dal vivo.
Metteremo insieme le cose in modo che mentre scorri verso il basso dalla parte superiore della pagina vedrai un "Alien Lander" che si sta facendo strada verso il basso. All'inizio vedremo un UFO sospeso nello spazio.
Mentre scorriamo verso il basso, l'UFO raggiungerà l'atmosfera e diventerà una "cometa aliena".
E infine, quando passa attraverso la linea degli alberi, si trasformerà in un "piccolo uomo verde" che lo fa atterrare a terra.
Dai un'occhiata alla demo dal vivo!
In questo progetto utilizzeremo le immagini SVG per sfruttare la loro capacità di ridimensionare in modo fluido e le dimensioni ridotte dei file.
Prima di iniziare la codifica, avrai bisogno dell'immagine creata nella prima parte di questa serie di tutorial, divisa in quattro file SVG:
Puoi esportare queste immagini SVG dalla tua app di grafica preferita, se lo desideri, o in alternativa troverai tutte e quattro le immagini pronte per l'uso nei file sorgente su GitHub.
Crea una nuova cartella per il tuo progetto e al suo interno crea una sottocartella denominata "css" e un'altra chiamata "immagini".
Copia e incolla le tue quattro immagini SVG nella nuova cartella "images".
Nella cartella "css" crea un file chiamato "style.css".
Nella cartella principale crea un nuovo file chiamato "index.html".
La struttura della cartella dovrebbe ora apparire così:
Nel file "index.html" aggiungi il seguente codice HTML di base per ottenere gli elementi essenziali e caricare il foglio di stile:
Scrolling Alien Lander
Potrebbe sembrare contro-intuitivo, ma in realtà aggiungeremo la nostra immagine di sfondo usando un img elemento piuttosto che come immagine di sfondo CSS. Lo stiamo facendo perché:
Ora che capisci perché stiamo adottando questo approccio, iniziamo a programmare!
Nel tuo file "index.html" aggiungi questo codice:
Se visualizzi in anteprima il tuo file in un browser ora dovresti vedere l'immagine che riempie il viewport. Tuttavia, ci sarà ancora dello spazio bianco attorno ai bordi.
Questo perché i browser includono un piccolo margine sul corpo elemento per impostazione predefinita. Per sovrascriverlo, nel file "style.css" aggiungi questo CSS:
body margin: 0;
C'è anche un altro default del browser che avremo bisogno di sovrascrivere, quello del display proprietà sulle immagini impostate su in linea. Se scorri verso la parte inferiore della pagina vedrai che al momento c'è un piccolo spazio bianco sotto l'immagine a causa di questa impostazione predefinita. Modificalo aggiungendo:
img display: block;
Ora dovresti vedere l'immagine "background.svg" riempire la finestra a filo con i bordi e se ridimensioni la larghezza della finestra vedrai l'immagine SVG ridimensionarsi per adattarla alla nuova dimensione. L'altezza del layout del sito cambierà anche per mantenere le proporzioni corrette per l'immagine "background.svg".
Per fare in modo che l'immagine che abbiamo appena inserito si comporti come un'immagine di sfondo, abbiamo bisogno di un modo per fare in modo che il resto del nostro contenuto si posizioni sopra di esso in primo piano. Possiamo ottenere ciò aggiungendo un div elemento che fungerà da contenitore, quindi modificando il suo posizione e z-index proprietà.
Nel tuo file "index.html", dopo l'immagine che hai appena aggiunto, inserisci questo nuovo div:
E in "style.css" aggiungi questo CSS:
.primo piano posizione: assoluta; inizio: 0; a sinistra: 0; altezza: 100%; larghezza: 100%; z-index: 1;
Esaminiamo ciò che stiamo facendo con il codice sopra.
Innanzitutto, impostando posizione a assoluto togliamo l'elemento fuori dal flusso regolare del documento (che altrimenti lo posizionerebbe sotto l'immagine di sfondo), permettendoci di posizionarlo ovunque scegliamo.
Quindi, impostiamo il superiore e sinistra proprietà a 0 che sposta l'elemento verso l'alto della finestra e lo allinea orizzontalmente con la nostra immagine di sfondo.
Dopo di ciò diamo l'elemento a altezza e larghezza di 100%. Questo assicura che l'elemento non collassi a zero, nascondendo qualsiasi contenuto al suo interno.
Alla fine, impostiamo il z-index a 1 che porta l'elemento in avanti in modo che si trovi di fronte alla nostra immagine di sfondo (che è su un valore predefinito z-index di auto). Ciò impedisce che il contenuto all'interno dell'elemento venga oscurato dall'immagine di sfondo.
Il nostro contenitore in primo piano è ora pronto per aggiungere il contenuto.
Il modo in cui stiamo facendo "atterrare" il nostro UFO sul terreno in basso è creare tre pannelli, uno per ogni fase di "atterraggio". Aggiungiamo quindi l'immagine SVG corrispondente per ciascun pannello, come ad esempio il file "ufo.svg" come immagine di sfondo a posizione fissa. L'immagine rimarrà quindi in posizione durante lo scorrimento mentre lo sfondo si sposta dietro di esso, creando l'illusione della discesa.
Dentro il tuo "primo piano" div, aggiungi questo nuovo div:
Ora aggiungi il seguente codice al tuo CSS:
.ufo_section height: 100%; background: url (... /images/ufo.svg); background-repeat: no-repeat; posizione di sfondo: centro; dimensione dello sfondo: 40% auto; background-attachment: fixed;
Nella prima riga del nostro codice sopra stiamo dando l'elemento a altezza di 100% per assicurarsi che il suo contenuto sia visibile. Quindi, aggiungiamo l'immagine "ufo.svg" come sfondo. Stiamo ambientando background-repeat a no-repeat dato che vogliamo solo un UFO da apparire, e lo faremo background-position posiziona l'immagine al centro sia orizzontalmente che verticalmente.
Con la nostra background-size proprietà, stiamo impostando la larghezza come valore basato su percentuale e consentendo di calcolare automaticamente l'altezza. Questa larghezza viene ricavata dall'immagine vettoriale originale in cui la larghezza dell'UFO è circa il 40% della larghezza dell'illustrazione complessiva.
Impostando la larghezza della nostra immagine "ufo.svg" come percentuale, quando la finestra viene ridimensionata e l'immagine "background.svg" cambia con essa, l'immagine UFO regolerà anche la sua larghezza per mantenere le proporzioni desiderate.
Sulla linea finale che abbiamo impostato background-attachment a fisso, il che significa che l'immagine rimarrà fissa sul posto mentre scorrono, dandoci la nostra illusione di discesa.
Prova ad aggiornare la pagina e a scorrere ora: dovresti vedere l'UFO muoversi verticalmente tra i pianeti.
Mentre scorri verso il basso sul tuo sito, una volta che vai abbastanza lontano noterai che l'UFO scompare. Questo succede perché stiamo scorrendo oltre l'altezza del ufo_section pannello in modo che a quel punto non possiamo più vedere il suo sfondo.
Abbiamo intenzione di impilare tre pannelli come questo uno sopra l'altro, in modo che quando si scorre oltre uno e il suo sfondo scompare lo sfondo del pannello seguente appare, creando l'effetto di una immagine sostituita dalla successiva.
Quindi ora ripeteremo il processo che abbiamo usato sopra per inserire le immagini "alien_comet.svg" e "alien_landing.svg".
Al tuo codice HTML, aggiungi quanto segue subito dopo ufo_section div e ancora all'interno del tuo div primo piano:
Quindi al tuo CSS aggiungi queste nuove classi:
.comet_section height: 100%; background: url (... /images/alien_comet.svg); background-repeat: no-repeat; posizione di sfondo: centro; dimensioni dello sfondo: 15% auto; background-attachment: fixed; .landing_section height: 100%; background: url (... /images/alien_landing.svg); background-repeat: no-repeat; posizione di sfondo: centro; dimensioni dello sfondo: 15% auto; background-attachment: fixed; posizione: relativa;
Stiamo usando lo stesso codice e le stesse tecniche qui, con solo i nomi dei file immagine modificati e la larghezza sul background-size proprietà impostata su 15% per adattarsi alle immagini più strette che abbiamo appena aggiunto.
Il tuo file "style.css" è ora finito e dovrebbe contenere il seguente codice:
body margin: 0; img display: block; . foreground position: absolute; inizio: 0; a sinistra: 0; altezza: 100%; larghezza: 100%; z-index: 1; .ufo_section height: 100%; background: url (... /images/ufo.svg); background-repeat: no-repeat; posizione di sfondo: centro; dimensione dello sfondo: 40% auto; background-attachment: fixed; .comet_section height: 100%; background: url (... /images/alien_comet.svg); background-repeat: no-repeat; posizione di sfondo: centro; dimensioni dello sfondo: 15% auto; background-attachment: fixed; .landing_section height: 100%; background: url (... /images/alien_landing.svg); background-repeat: no-repeat; posizione di sfondo: centro; dimensioni dello sfondo: 15% auto; background-attachment: fixed; posizione: relativa;
Torna al tuo sito ora, scorri verso il basso e dovresti vedere l'UFO trasformarsi nella cometa, poi un po 'più in basso girare nel "piccolo uomo verde".
In questo momento noterai che abbiamo un paio di problemi da risolvere durante lo scorrimento e che sono:
Poiché la nostra immagine "background.svg" non ha una dimensione fissa, non conosceremo l'esatta altezza del pixel che ogni pannello dovrebbe avere prima del caricamento. Tuttavia, ciò che possiamo decidere in anticipo è l'altezza di ciascun pannello come percentuale dell'altezza di "background.svg".
Usando jQuery possiamo implementare questo processo:
Mentre ci siamo, aggiungeremo anche un paio di div extra vuote per fungere da distanziatori tra ogni pannello e impostare la loro altezza usando jQuery. L'aggiunta di spazio tra i pannelli renderà la transizione più fluida, risolvendo il problema di vedere l'immagine "alien_comet.svg" prima che l'immagine "ufo.svg" sia scomparsa.
Aggiorna il tuo codice HTML in modo che ci sia un div spacer tra ogni div esistente in questo modo:
E nella sezione head, carica in jQuery aggiungendo quanto segue:
Prima della chiusura
Accentsconagua
Vogliamo che questa funzione si attivi quando la pagina viene caricata per la prima volta e ogni volta che viene ridimensionata, quindi per ottenere ciò aggiungi anche il seguente codice dopo l'apertura copione etichetta:
$ (document) .ready (function () set_section_heights ();); $ (window) .resize (function () set_section_heights (););
Dentro il set_section_heights () funzione, la prima cosa che dobbiamo fare è scoprire quale altezza è attualmente la nostra immagine di sfondo e salvarla come variabile. Per fare ciò aggiungi questo codice:
var doc_height = $ (". background"). height ();Con la prima parte del codice, $ ( "Sfondo"), jQuery trova l'elemento con il nome della classe sfondo. L'allegato .altezza() la funzione ottiene quindi l'altezza del pixel di quell'elemento come un numero intero. Questo ci dice quanto è alta la nostra immagine "background.svg" e salva quel numero nella variabile doc_height.
Ora andremo a configurare un oggetto in cui possiamo definire:
Stiamo andando a scorrere questo oggetto e utilizzare i valori che contiene per ridimensionare le sezioni in primo piano.
Iniziamo con una sola voce nell'oggetto:
var section_heights = "ufo_section": 0.25
Qui abbiamo impostato l'indice, (il valore a sinistra), su ufo_section per abbinare il nome della classe della nostra prima sezione.
Quindi abbiamo impostato il valore su 0.25 che è un altro modo di esprimere il 25%. In un momento, moltiplicheremo questo valore per il numero memorizzato nel doc_height variabile, cioè l'altezza dell'immagine di sfondo. In questo modo diremo che vogliamo il ufo_section pannello deve essere il 25% dell'altezza corrente di "background.svg".
Ad esempio, se l'altezza di "background.svg" era 1000px l'altezza della sezione ufo sarebbe uscita come 250px:
1000 * 0,25 = 250
Ora che abbiamo analizzato il funzionamento di questo oggetto, aggiungiamo alcune voci per gli altri elementi su cui vogliamo impostare le altezze. Aggiorna il tuo oggetto al seguente:
var section_heights = "ufo_section": 0.25, "spacer_one": 0.03, "comet_section": 0.36, "spacer_two": 0.06, "landing_section": 0.298
Nota: Ho selezionato questi valori in base a tentativi ed errori, quindi sentitevi liberi di giocare con i numeri dopo aver completato questo tutorial per vedere gli effetti.
section_heights OggettoCon il nostro oggetto completo siamo pronti per iniziare a scorrere e ridimensionare i nostri pannelli.
Per prima cosa avremo bisogno di un $ .Ogni () funzione per iterare il section_heights oggetto ed estrae l'indice e il valore, (che rappresentano rispettivamente il nome e l'altezza della classe), da ciascuna voce che contiene.
Aggiungi questo codice dopo il tuo section_heights oggetto:
$ .each (section_heights, function (index, value) console.log ("Index:" + index, "| Value:" + value););Per consentire di vedere come la funzione di iterazione sopra emette il indice e valore variabili, stiamo usando console.log () scrivere un piccolo messaggio alla console per ogni voce in section_heights oggetto.
Ricarica il tuo sito, apri Chrome Web Developer Tools (o il suo equivalente nel browser preferito) e guarda la console. Dovresti vedere questo:
A sinistra di ciascun messaggio dopo Indice: Puoi vedere il indice per ogni voce, cioè i nomi delle classi degli elementi che vogliamo ridimensionare.
Sulla destra di ciascun messaggio dopo Valore: Puoi vedere il valore per ogni voce, cioè la frazione dell'altezza complessiva di ciascun pannello dovrebbe essere.
Ora invece di registrare questi dati nella console, usiamolo per impostare le dimensioni delle nostre sezioni in primo piano. Elimina il console.log () linea e sostituirlo con questo:
$ ("." + index) .height (Math.floor (valore * doc_height));Analizziamo cosa fa questa linea.
Prima di tutto $ ("." + indice). Lo usiamo per trovare l'elemento che vogliamo ridimensionare. Ad esempio, con la prima voce nel nostro oggetto il indice è impostato su ufo_section. In questo caso la prima parte del nostro codice valuterà di diventare $. (".ufo_section"). Con questo codice, a jQuery viene richiesto di cercare nella pagina l'elemento con la classe ufo_section.
Successivamente aggiungiamo .altezza(… ). Con questo codice, jQuery imposterà l'altezza dell'elemento trovato, cambiandolo al valore passato tra parentesi.
Tra le parentesi vedrai valore * doc_height. Questo è dove stiamo facendo la moltiplicazione che abbiamo menzionato prima per calcolare l'altezza desiderata del pannello. Ad esempio, la prima voce del nostro oggetto ha il valore 0.25. Questo numero verrà moltiplicato per il numero salvato nel file doc_height variabile.
Intorno alla moltiplicazione di queste due variabili vedrai Math.floor (). Questo arrotonda il risultato della nostra moltiplicazione fino al numero intero più vicino.
Quindi mettendo tutto insieme, se il valore di doc_height è 5197, la prima voce nel nostro oggetto dovrebbe moltiplicare quella di 0.25 dandoci un risultato di 1.299,25.
Math.floor () arrotonderà tale importo fino a 1299. Ciò significa che il nostro codice ora valuterebbe di diventare: $. (".ufo_section") .height (1299);
Con questa linea, jQuery troverà l'elemento con la classe ufo_section e impostare la sua altezza a 1299px.
Questo avvolge il tuo codice HTML e JavaScript. Il tuo file "index.html" completato dovrebbe ora contenere questo codice:
Scrolling Alien Lander 