Share
È da qualche tempo una delle parole più importanti del web design, quindi oggi ci metteremo alla prova con un po 'di parallasse. Stiamo mettendo insieme un semplice layout reattivo, quindi con l'aiuto di skrollr.js, applicheremo un sottile effetto di parallasse all'intestazione.
Questo tutorial coprirà alcuni aspetti degni di nota, quindi fai attenzione:
Va bene allora! Iniziamo il nostro progetto con alcuni file bare bones. Questo è quello di cui avrai bisogno per cominciare:
Il nostro index.html è vuoto al momento, quindi abbiamo una directory img con la nostra immagine di caffè al suo interno, una directory css con un file di reset più la nostra griglia fluida e uno styles.css vuoto, in attesa del nostro input. Infine, abbiamo una directory js con il file skrollr.js scaricato da GitHub.
Il nostro index.html inizierà con alcuni elementi molto familiari:
Pap assurdo
Non ti annoierò con tutti questi frammenti, ma vale la pena notare che il meta tag viewport è presente, abbiamo dato al documento un titolo (senza senso), legato ad alcune favicon - e che abbiamo indicato solo un file css: styles.css.
Un piccolo foglio di stile per dominarli tutti.
Quando ho parlato per la prima volta di file e cartelle ho menzionato tre fogli di stile; normalize.css (per reimpostare responsabilmente i nostri stili), fluid_skeleton.css (che mi sono adattato dallo skeleton boilerplate) e gli attuali styles.css. Quindi, perché abbiamo solo collegato a uno nel nostro file HTML?
Bene, lo useremo come introduzione a Sass - senza usare effettivamente nessun Sass.
Usando l'estensione del file .scss invece di .css, possiamo trascinarli tutti in un unico file e minimizzare l'intero lotto. Iniziare rinominando i file CSS in questo modo:
E 'stato facile, giusto? Notare i trattini bassi sui primi due, che impediscono la compilazione dei file nei loro equivalenti css. Invece, li importeremo nel nostro styles.scss, proprio come faremmo con una normale regola css @import:
/ * importazioni * / @import "normalizza"; @import "fluid_skeleton";
Ora, quando compileremo, ci verrà dato un file styles.css creato da tutte le regole nei nostri file .scss. Abbiamo solo bisogno di distribuire questo singolo file sul nostro server web, salvando il nostro sito due richieste e diversi Kbs. Buon lavoro :)
Per compilare effettivamente i file come descritto sopra, avremo bisogno di un'applicazione di compilazione (a meno che tu non voglia usare la riga di comando?). Ci sono alcune applicazioni che faranno il lavoro per te, io uso CodeKit (perché è fantastico) ma CompassApp ti servirà altrettanto bene, in più è disponibile su Windows.
Configurare il nostro progetto è facile come trascinare la cartella del progetto nel compilatore. CodeKit ora sta guardando tutti i file all'interno di quella cartella. Ogni volta che clicco su "salva", non importa quale file SCSS sto modificando, CodeKit ricompilerà tutti i pezzi, sfornando il nostro CSS aggiornato e, se la nostra pagina è aperta in un browser, aggiorneremo anche quella per noi.
Anche se non sei pronto per guardare ulteriormente in Sass, questo è un flusso di lavoro ideale.
Ora riempiamo il file index.html, dopodiché possiamo davvero iniziare lo styling. Come accennato, sto usando fluid_skeleton.css come base per la griglia reattiva. È una base semplice, senza complicazioni da cui partire per un semplice layout. Tutto ciò che richiede è che usiamo la sua struttura a griglia per costruire il nostro layout.
Abbiamo bisogno:
Accentsconagua
.otto per esempio, per un totale di sedici tutti insieme.Ad esempio, possiamo costruire un rapido layout a quattro colonne in questo modo:
Il foglio di stile impone che questi div sono tutti al 100% di larghezza, impilati ordinatamente uno sull'altro, fino a quando la vista raggiunge 767px di larghezza. A quel punto tutto cambia e queste quattro colonne si diffonderanno sullo schermo come previsto dalla natura.
Questo rapido wireframe dovrebbe darti un'idea di come andremo a tracciare il nostro markup strutturale.
E se stai cercando una copia / incolla veloce, questo ti aiuterà:
Per ulteriori informazioni su come Skeleton è messo insieme, dai un'occhiata a Building a Responsive Layout With Skeleton: Starting Out.
È sempre più facile vedere cosa stai facendo quando hai un po 'di testo fittizio con cui lavorare, quindi getta un'intestazione e un link nella regione dell'intestazione in alto:
Pap assurdo
di Ian Yates
Quindi rivolgi la tua attenzione alle colonne e al piè di pagina. Ho afferrato un carico di testo di riempimento da T'Lipsum "Un generatore di Yorkshire Lorem Ipsum per lo Yorkshire Folks" (perché sono un orgoglioso Yorkshireman)!
Per darti un'idea, il corpo principale (la nostra area con dodici colonne) inizia così:
Mek è un birraio
Una pinta o dolce. Di 'questo summit per ora che tu non ti chuffin' nora eeh appens come forse. Ey up è la tua stessa contea. Be reet be reet nah allora michael palin bloomin "eck gerritetten. Imparerò questa delicata viola del sud. Qualunque rooad morbido del sud del pensiero viola un ladro mardy bum shu 'thi gob faccia come un culo schiaffeggiato. Ee di gomma mardy bum michael palin. La stessa contea di Dio Ti ho detto. Sembra come forse la stessa contea di Dio dove si trova.
Attaccare alcuni link nel footer e abbiamo finito qui!
Prima di andare avanti voglio prendere alcuni font. Vai su Google Web Fonts e dai un'occhiata a PT Sans e PT Serif. Sono un ottimo duo, quindi aggiungili entrambi alla tua raccolta e raccogli il link del foglio di stile.
Per risparmiare tempo, questo è il link che mi è stato dato, dopo aver selezionato le versioni da 400 e 700 pesi di ciascuna:
@import url (http://fonts.googleapis.com/css?family=PT+Sans:400,700|PT+Serif:400,700);
Puoi incollarlo sotto le altre nostre importazioni in styles.scss. Una volta compilato, il contenuto di questo file CSS non verrà effettivamente trascinato nel nostro CSS minificato, ma la regola @import rimarrà e il font sarà usato lo stesso.
Ora imposterò PT Sans come font di base, impostando la dimensione del font sul 100% del valore predefinito del browser, con l'altezza della linea a 1.5em:
html font: 100% / 1.5em 'PT Sans', sans-serif;
Gran parte dello stile che applichiamo a questa pagina è abbastanza generico. Colori e dimensioni per la tipografia, imbottitura sulle fasce e così via. Estrai i file sorgente e troverai il contenuto di styles.scss autoesplicativo.
Tuttavia, concentriamoci un attimo sull'area dell'intestazione. Nel suo stato mobile-first, vogliamo dargli uno sfondo marrone. Solo una volta che il viewport è più grande, introdurremo l'immagine del caffè (per risparmiare agli utenti mobili la larghezza di banda). Ecco come appaiono gli stili per la banda di intestazione ora:
header.band background: # 4b371f; colore bianco; allineamento del testo: centro; imbottitura: 10% 0 15% 0;
La parte superiore e inferiore del padding è stata applicata come percentuale della larghezza del browser. Ciò significa che l'area dell'intestazione aumenta in altezza man mano che la finestra del browser si espande. È un bell'effetto e mantiene la piega (ovunque sia in questi giorni) proporzionale alla dimensione della finestra del browser.
Ora diamo uno stile al titolo che abbiamo al suo interno.
h1, h2, h3 font-family: 'PT Serif', serif; font-weight: 700; allineamento del testo: centro; header.band h1 font-size: 3em; line-height: 1em; margin-bottom: 1em;
Useremo la variante serif di PT per le nostre intestazioni, che si accoppia bene con la copia del corpo in sans.
Infine, modelleremo la nostra ancora per farla risaltare:
a.button background: # e33f0c; allineamento del testo: centro; imbottitura: .5em 1em; colore bianco; font-weight: bold; decorazione del testo: nessuna; box-shadow: 0 0.2em 0 # ab3009; text-transform: maiuscolo; letter-spacing: 0.1em; / * transizione cross-browser stuff * / -webkit-transition: background 0.2s easy-out; / * Safari 3.2+, Chrome * / -moz-transition: background 0.2s easy-out; / * Firefox 4-15 * / -o-transition: background 0.2s easy-out; / * Opera 10.5-12.00 * / transition: background 0.2s easy-out; / * Firefox 16+, Opera 12.50+ * / a.button: hover background: # ab3009;
Oggetti semplici, tutti basati su em per assicurarti che possano crescere e rimpicciolirsi se necessario, e se davvero abbraccerai Sass potresti rendere ancora più sottile tutto lo styling! Per ora però, questo è quello che dovresti avere:
Avendo costruito la nostra esperienza mobile di base, ora abbelliamo le cose per schermi più grandi. Il modo in cui scegli di organizzare le tue query multimediali dipende da te, ma siccome questo è un foglio di stile abbastanza semplice, ho intenzione di ammucchiare tutte le mie regole extra in una sola query multimediale alla fine di styles.scss.
Aggiungiamo alcune regole che daranno il via a schermi più grandi di 767px. Questo punto di interruzione è abbastanza arbitrario ed è appena successo per adattarsi al design quando l'ho creato per la prima volta. Quale modo migliore per scegliere un punto di interruzione?!
@media solo schermo e (min-larghezza: 767px)
In realtà non ci sono molti stili da aggiungere qui, vogliamo solo aumentare la dimensione del carattere usata in tutto il documento, rendere il nostro pulsante un po 'più prominente e aggiungere un'immagine di sfondo all'area dell'intestazione:
@media solo schermo e (min-width: 767px) body font-size: 1.125em; / * 18px / 16px * / line-height: 1.7em; header.band background-image: url (... /img/background.jpg); dimensione dello sfondo: 100%; header.band h1 font-size: 3.25em; / * 52/16 * / a.button padding: .75em 1.5em;
Sugli schermi più grandi dovremmo ora avere qualcosa come ...
Attualmente, quando scorri verso il basso la pagina, la nostra intestazione scompare dalla vista come ci si aspetterebbe. Passiamo ora alla base di questo intero esercizio; parallasse. Dovresti già aver scaricato skrollr.js da GitHub e averlo collocato nella cartella js.
Successivamente, dobbiamo fare riferimento a esso nel nostro html, quindi posizionare questo link in basso, prima della chiusura
Questo è un gioco Java vanilla, quindi non abbiamo bisogno di richiamare jQuery in anticipo. Quindi, dobbiamo chiamare skrollr, che facciamo così:
Ci sono un certo numero di opzioni con cui possiamo giocare, tutte con impostazioni che possiamo inserire tra quelle parentesi graffe, ma per ora lasceremo le cose esattamente come sono.
Nella sua attuale fase di sviluppo, skrollr ci impone di macellare un po 'la nostra revisione, aggiungendo regole in linea sui nostri elementi. Alexander Prinzhorn, produttore di Skrollr, è impegnato in un progetto che separa gli stili dal markup, ma è ancora in corso.
Ad ogni modo, lo sto facendo sembrare peggio di quello che è, ci viene semplicemente richiesto di aggiungere lo stile dei nostri fotogrammi chiave agli attributi dei dati sugli elementi a cui miriamo. Ad esempio, spostiamo la posizione dell'immagine di sfondo della nostra intestazione, a seconda della posizione della barra di scorrimento.
Aggiungiamo il nostro primo stile di keyframe in questo modo:
Skrollr usa dati- e quindi un valore che rappresenta la posizione dei pixel della barra di scorrimento. Quindi aggiungiamo alcuni stili come faremo con i CSS. Abbiamo letteralmente specificato che quando si trova la barra di scorrimento 0px (la parte superiore della pagina) vogliamo il background-position di questo elemento per essere 0px 0px.
Possiamo quindi aggiungere tutti gli altri fotogrammi chiave che ci piacciono, quindi gettiamo un altro attributo dati, subito dopo il nostro primo.
data-500 = "background-position: 0px -250px;"
Questo poi dice; quando la barra di scorrimento si è spostata 500px down, vogliamo il background-position essere 0px -250 px (es .: 250px verso l'alto). Skrollr animerà il processo tra questi due keyframe, in modo da ottenere una transizione graduale.
Bingo! Il nostro primo effetto di parallasse.
Abbiamo ottenuto un effetto di parallasse molto semplice che aggiunge un elemento di dinamismo ogni volta che l'utente sta scorrendo verso il basso. Possiamo applicare qualunque sia la regola CSS che vogliamo con skrollr, quindi diamo un'ultima volta alla nostra regione di intestazione.
Ricorda questo elemento, che contiene l'intestazione e il link?
Stiamo per aggiungere due fotogrammi chiave; uno per lo stato iniziale (0px) e un altro per quando la barra di scorrimento raggiunge 180 px.
Questi, come puoi vedere, dettano l'opacità, un'altra proprietà CSS familiare. Man mano che la barra di scorrimento si sposta verso il basso, prima che l'intestazione abbia lasciato la pagina, il contenuto di questo div svanirà gradualmente. Un effetto semplice, ma che influisce in modo sottile sull'esperienza utente di questa pagina. Cose come questa dovrebbero essere usate in modo responsabile!
13. Altre impostazioni
Skrollr viene fornito con diverse opzioni extra, a seconda di quanto ti senti sicuro. Tutte queste impostazioni possono essere passate a skrollr per mezzo di coppie chiave-valore in questo modo:
Ad esempio, questa istruzione dice a skrollr di non forzare l'altezza del documento. Di default skrollr costringerà il documento ad essere alto almeno quanto il keyframe più alto che hai definito. Nel nostro caso, la nostra posizione di scrollbar più lontana è stata specificata come 500px, mentre la nostra pagina è waaa-aay più alta di quella. Pertanto non abbiamo avuto bisogno di pensare a scavalcare l'altezza forzando.
Un'altra cosa che potresti voler fare è rimuovere lo scorrimento fluido. Prova ancora una volta il nostro effetto di parallasse; vedi come la posizione dell'immagine di sfondo accelera e decelera? Ciò impedisce qualsiasi sobbalzo, ma potresti non voler che l'effetto appaia in quel modo. Per rendere il tuo interpolazione più lineare, aggiungi questo:
Potresti anche aggiungere questo per elemento ancora una volta appoggiandosi agli attributi dei dati (molto eleganti):
Modalità relativa
Vale anche la pena menzionare la modalità relativa, che ci consente di impostare i fotogrammi chiave relativo all'elemento, non il documento come abbiamo fatto. In questo modo, potremmo modificare l'altezza, i margini ecc. Della nostra intestazione (per esempio) senza dover rivedere le nostre impostazioni dei fotogrammi chiave.
Usando la modalità relativa si altera la sintassi necessaria all'interno degli attributi dei dati, che non entrerò qui, ma vale la pena dare un'occhiata a.
Per maggiori informazioni su cosa è possibile utilizzare le opzioni di skrollr, consulta gli esempi e la documentazione.
14. Supporto mobile
Ecco qualcosa che non conoscevo fino a quando non ho letto la documentazione di skrollr:
I browser mobili cercano di risparmiare la batteria ovunque possano. Ecco perché i browser per dispositivi mobili ritardano l'esecuzione di JavaScript durante lo scorrimento. In particolare, iOS fa questo in modo molto aggressivo e blocca completamente JavaScript.
Pertanto, per consentire a skrollr di funzionare su piattaforme mobili, Alexander ha dovuto creare uno specifico bit di magia extra che viene inserito dopo un po 'di sniffing del browser. Come hai visto, il nostro effetto si degrada molto bene, quindi non sono preoccupato per gli utenti di smartphone che si perdono un po 'di parallasse. Tuttavia, se vuoi assicurarti che il tuo progetto supporti i dispositivi mobili, avrai bisogno di qualcosa in più.
- Dopo aver incluso lo script skrollr, dovrai eseguire un controllo del browser wee, che assomiglia a questo:
Noterai che questo poi aggiunge
skrollr.mobile.min.jsse le condizioni sono soddisfatte (cioè: viene utilizzato un dispositivo mobile), assicurati solo che il percorso sia corretto secondo il tuo progetto. Troverai questo script aggiuntivo nel download sorgente su GitHub.- Infine, assicurati che il primo elemento dopo l'apertura
tag ha .Questo è tutto! Non hai bisogno di capire perché funziona, lo fa. Se sei curioso di saperne di più sul supporto mobile, dai un'occhiata alla documentazione.
Conclusione
Skrollr non è solo una parallasse ... cosa, fa molto più di quello che abbiamo mostrato. Con un po 'di fortuna, ora sarete in grado di implementare un po' di razzmatazz (qualunque cosa sia) sulle vostre pagine web statiche. Sentiti libero di porre qualsiasi domanda tu possa avere nei commenti!
Ulteriori risorse
- skrollr.js su GitHub
- @ Prinzhorn su Twitter
- Creare un sito Web di scorrimento Parallax utilizzando Stellar.js su Webdesigntuts+
- Scorrimento allegro con skrollr.js
- T'Lipsum A Yorkshire Lorem Ipsum Generator per lo Yorkshire Folk
- fluid_skeleton.css
- CodeKit
- I pensieri di Trent Walton su Parallax Scrolling on the Web
