Share
Acesta a fost unul dintre cele mai mari cuvinte de web design buzz pentru o perioada de timp acum, asa ca astazi vom incerca sa punem mana la un pic de Parallax. Vom pune împreună un aspect simplu, apoi cu ajutorul skrollr.js, vom aplica un efect subtil de parallax asupra antetului.
Acest tutorial va acoperi câteva aspecte demne de remarcat, așa că acordați atenție:
Bine atunci! Să începem proiectul cu niște dosare cu oase goale. Din acest lucru va trebui să începeți:
Indexul nostru index.html este gol în momentul respectiv, apoi avem un director img cu imaginea noastră de cafea în interiorul acestuia, un director css cu un fișier de resetare plus grila noastră fluidă și un stiles.css gol, așteptând cu răbdare contribuția noastră. În sfârșit, avem un director js cu fișierul skrollr.js descărcat de la GitHub.
Indexul nostru index.html va începe cu câteva elemente foarte familiare:
Papa fără înțeles
Nu te voi plictisi cu toate aceste bucăți, dar merită remarcat faptul că meta-tag-ul de vizualizare este prezent, am dat documentul un titlu (lipsit de sens), legat de unele favicoane - și că am arătat doar un singur fișier css: styles.css.
O foaie de stil minuscul pentru a le conduce pe toate.
Când am vorbit mai întâi despre fișiere și dosare am menționat trei foi de stil; normalize.css (pentru a reinițializa responsabil stilurile noastre), fluid_skeleton.css (pe care l-am adaptat din scheletul de boilerplate) și stiles.css real. Deci, de ce am legat doar unul cu unul din fișierul nostru HTML?
Ei bine, vom folosi asta ca o introducere la Sass - fără a utiliza niciun Sass.
Folosind extensia de fișiere .scss în loc de .css, putem să le tragem într-un singur fișier și să minimizăm întregul lot. Începeți prin redenumirea fișierelor CSS cum ar fi:
A fost ușor, nu? Observați sublinierile din primele două, care împiedică compilarea acestor fișiere în echivalentele lor css. În schimb, le vom importa în stiles.scss, așa cum vom folosi o regulă normală css @import:
/ * importuri * / @import "normalize"; @import "fluid_skeleton";
Acum, când vom compila, vom primi un fișier styles.css construit din toate regulile din fișierele noastre .scss. Trebuie doar să implementăm acest singur fișier pe serverul nostru web, salvând site-ul nostru două solicitări și mai multe Kbs. Bună treabă :)
Pentru a compila fișierele în modul descris mai sus, vom avea nevoie de o aplicație de compilare (dacă nu doriți să utilizați linia de comandă?). Există câteva aplicații care îți vor face treaba, eu folosesc CodeKit (pentru că este minunat), dar CompassApp îți va servi la fel de bine, plus este disponibil pe Windows.
Configurarea proiectului nostru este la fel de ușor ca tragerea dosarului proiectului în compilator. CodeKit urmărește acum toate fișierele din dosarul respectiv. Ori de câte ori am lovit "salvați", indiferent de fișierul SCSS pe care-l editez, CodeKit va recompila toate piesele, aruncând CSS actualizat și, dacă pagina noastră este deschisă într-un browser, reîmprospătând asta și pentru noi.
Chiar dacă nu sunteți gata să priviți mai mult în Sass, acesta este un flux de lucru ideal.
Acum, completați fișierul index.html, după care putem începe cu adevărat stilul. Așa cum am menționat, utilizez fluid_skeleton.css ca bază pentru grila receptivă. Este o bază extraordinară, fără complicații, de la care să pornești un aspect simplu. Tot ceea ce este necesar este ca noi sa folosim structura grilei pentru a ne construi structura.
Avem nevoie:
Accentsconagua
.opt de exemplu, în total șaisprezece împreună.De exemplu, putem construi un aspect rapid cu patru coloane, cum ar fi:
Foaia de stil dictă că aceste divizii sunt toate lățime de 100%, stivuite perfect pe una din cealaltă, până când fereastra de vizualizare atinge o lățime de 767 pixeli. La acel moment, totul se schimbă și aceste patru coloane se vor răspândi pe ecran, așa cum intenționează natura.
Acest cadru de tip wireframe rapid vă va oferi o idee despre modul în care vom proiecta structura noastră structurală.
Și dacă sunteți după o copie rapidă / paste, aceasta vă va ajuta:
Pentru mai multe informații despre modul în care scheletul este pus împreună, aruncați o privire la Construirea unui aspect responsabil cu scheletul: începerea.
Este întotdeauna mai ușor să vezi ce faci atunci când ai un text fictiv cu care să lucrezi, deci aruncă o rubrică și o legătură într-o regiune a antetului în partea de sus:
Papa fără înțeles
de Ian Yates
Apoi, îndreptați-vă atenția asupra coloanelor și subsolului. Am luat o încărcătură de text de umplere de la T'Lipsum "Generatorul Yorkshire Lorem Ipsum pentru oamenii din Yorkshire" (pentru că sunt un mândru Yorkshireman)!
Pentru a vă oferi o idee, corpul principal (zona noastră de douăsprezece coloane) începe astfel:
Mek 's Brew Lad
O halbă ușoară. Spune-i că, pentru că acum nu ți-o faci, nu-i așa? Ey sus este județul tău. Be reet re reet nah apoi michael palin bloomin "eck gerritetten. Voi învăța cum ar fi o pansă moale din sud. Orice pantaloni din sud, moi, nu-și dau seama că un băiețel se înfățișează ca un măgar. Ee de marmură de mestecat michael palin. Județul propriu al lui Dumnezeu. Nu te mai bate. Apreciează ca un județ propriu al lui Dumnezeu unde este bin.
Puneți câteva linkuri în subsol și am terminat aici!
Înainte de a merge mai departe, vreau să apuc câteva fonturi. Treceți la Fonturile Google Web și vizitați PT Sans și PT Serif. Sunt un duo grozav, așa că adăugați-le în colecția dvs. și colectați legătura stilului.
Pentru a economisi timp, acesta este legătura care mi-a fost dată, după ce am selectat versiunile cu greutate de 400 și 700 de fiecare:
@import url (http://fonts.googleapis.com/css?family=PT+Sans:400,700|PT+Serif:400,700);
Poți lipi acest lucru sub alte importuri în stiles.scss. Atunci când se compilează, conținutul acestui fișier CSS nu va fi tras în CSS miniaturizat, dar regula @import va rămâne și fontul va fi folosit la fel.
Acum voi stabili PT Sans ca font de bază, setând dimensiunea fontului la 100% din valoarea implicită a browserului, cu înălțimea liniei la 1.5em:
html font: 100% / 1.5 "PT Sans", sans-serif;
O mare parte din stilul pe care îl aplicăm acestei pagini este destul de generic. Culori și mărimi pentru tipografie, căptușeală pe benzi și așa mai departe. Trageți fișierele sursă în afară și veți găsi conținutul stiles.scss auto-explicativ.
Cu toate acestea, hai să ne concentrăm pentru o clipă pe zona antetului. În starea inițială mobilă, dorim să îi oferim un fundal maro. Doar odată ce portul de vizualizare este mai mare, vom aduce imaginea de cafea (pentru utilizatorii de telefonie mobilă de rezervă latimea de bandă). Acestea sunt stilurile pentru trupa de antet ca acum:
header.band background: # 4b371f; culoare albă; text-align: centru; umplutură: 10% 0 15% 0;
Suprafața și partea de jos a plăcuței au fost aplicate ca procent din lățimea browserului. Aceasta înseamnă că zona antetului crește în înălțime pe măsură ce se extinde fereastra browserului. Este un efect destul de frumos și păstrează pliul (oriunde este în zilele noastre) proporțional cu dimensiunea ferestrei browserului.
Acum, hai să stilăm poziția pe care o avem în cadrul ei.
h1, h2, h3 font-family: "PT Serif", serif; greutatea fontului: 700; text-align: centru; header.band h1 font-size: 3em; linia-înălțime: 1em; marginea inferioară: 1em;
Vom folosi varianta serifă a PT pentru titlurile noastre, care se împerechează bine cu copia corpului fiind în sansă.
În cele din urmă, vom ancora stilul nostru pentru a face să iasă în evidență:
a.button background: # e33f0c; text-align: centru; padding: .5em 1em; culoare albă; font-weight: bold; text-decoration: nici unul; cutie-umbra: 0 0.2em 0 # ab3009; text-transform: majuscule; împărțirea literelor: 0,1; / * chestii de browser de tranziție în browser * / -webkit-transition: background 0.2s ease-out; / * Safari 3.2+, Chrome * / -moz-tranziție: fundal 0.2s ease-out; / * Firefox 4-15 * / -o-tranziție: fundal 0.2s ease-out; / * Opera 10.5-12.00 * / tranziție: background 0.2s ease-out; / * Firefox 16+, Opera 12.50+ * / a.button: hover fundal: # ab3009;
Lucruri simple, toate bazate pe em pentru a se asigura că pot crește și se pot micșora dacă este nevoie - și dacă într-adevăr îți vei îmbrățișa Sass, poți face tot mai mult stilul chiar mai subțire! Pentru moment, totuși, asta ar trebui să aveți:
După ce am construit experiența noastră mobilă de bază, să îmbogățim lucrurile pentru ecrane mai mari. Modul în care alegeți să vă aranjați interogările dvs. media depinde de dvs., dar deoarece aceasta este o foaie de stil destul de necomplicată, îmi voi strânge toate regulile suplimentare într-o singură interogare media la sfârșitul stiles.scss.
Să adăugăm câteva reguli care vor da naștere pe ecrane mai mari de 767 de pixeli. Această întrerupere este destul de arbitrară și tocmai sa întâmplat să se potrivească cu design-ul când l-am construit pentru prima dată. Ce modalitate mai bună de a alege un punct de întrerupere?!
numai ecranul @media și (min-width: 767px)
Nu există, de fapt, multe stiluri pe care să le adăugăm aici, vrem doar să mărim dimensiunea fontului utilizat în document, să facem butonul mai proeminent și să adăugăm o imagine de fundal în zona antetului:
@media numai pe ecran și (min-lățime: 767px) body font-size: 1.125em; / * 18px / 16px * / linie înălțime: 1.7cm; header.band fundal-imagine: url (... /img/background.jpg); dimensiunea fundalului: 100%; header.band h1 font-size: 3.25em; / * 52/16 * / a.button umplutură: .75em 1.5em;
Pe ecrane mai mari ar trebui să avem acum ceva ...
În prezent, când parcurgeți pagina în jos, antetul dispare de la vizualizare așa cum v-ați aștepta. Să trecem acum la baza întregului exercițiu; paralaxă. Ar fi trebuit deja să descărcați skrollr.js de la GitHub și să-l plasați în folderul js.
Apoi, trebuie să o referim în html-ul nostru, așadar plasați acest link în partea de jos, înainte de închidere
Acesta este un jucator de vanilie JavaScript, deci nu avem nevoie sa tragem in jQuery in prealabil. Apoi, trebuie să apelăm la skrollr, ceea ce ne place:
Există o serie de opțiuni pe care le putem juca în jurul nostru, toate cu setări pe care le putem arunca între aceste acolade, dar pentru moment vom lăsa lucrurile exact așa cum sunt.
În stadiul actual de dezvoltare, skrollr ne cere să mătrăm marcajul nostru puțin, adăugând reguli pe elementele noastre. Producătorul lui Skrollr, Alexander Prinzhorn, este ocupat de un proiect care separă stilurile de marcaje, dar este încă în plină desfășurare.
Oricum, o facem să sune mai rău decât este, pur și simplu trebuie să adăugăm stilul nostru de cadre cheie la atributele de date ale elementelor pe care le vizăm. De exemplu, să mutăm poziția imaginii de fundal a antetului nostru, în funcție de poziția barei de derulare.
Adăugăm primul nostru stil de design cheie:
Skrollr folosește date- și apoi o valoare care reprezintă poziția pixelului barei de derulare. Apoi adăugăm un stil asemănător cu cel al CSS. Am specificat literalmente că atunci când bara de derulare este la 0px (în partea de sus a paginii) dorim background-position din acest element să fie 0px 0px.
Putem apoi adăuga cât mai multe alte cadre cheie, așa că haideți să aruncăm un alt atribut de date, imediat după primul nostru.
data-500 = "pozitie fundal: 0px -250px;"
Aceasta spune apoi; când bara de derulare a fost mutată 500în jos, dorim background-position a fi 0px -250px (adică: 250 de pixeli în sus). Skrollr va anima procesul dintre aceste două cadre cheie, așa că avem o tranziție lină.
Bingo! Primul nostru efect de parallax.
Am obținut un efect foarte parallax simplu, care adaugă un element de dinamism ori de câte ori utilizatorul se deplasează în jos. Putem aplica indiferent de regulile CSS pe care le dorim cu schrollr, așa că să dăm o singură ultimă inflorire regiunii noastre.
Rețineți acest element, care conține titlul și linkul?
Vom adăuga două cadre cheie; unul pentru starea inițială (0px) și altul pentru când bara de derulare ajunge la 180px.
Acestea, după cum puteți vedea, dictează opacitatea, o altă proprietate CSS familiară. Pe măsură ce bara de derulare se mișcă în jos, înainte ca antetul să fi părăsit pagina, conținutul din div va dispărea fără probleme. Un efect simplu, dar unul care influențează subtil experiența utilizatorului din această pagină. Lucruri de acest gen ar trebui folosite în mod responsabil!
13. Setări suplimentare
Skrollr vine ambalat cu mai multe opțiuni suplimentare, în funcție de cât de increzător te simți. Toate aceste setări pot fi transmise către skrollr prin intermediul unor perechi cheie-valoare, cum ar fi:
De exemplu, această instrucțiune indică scriitorului să nu forțeze înălțimea documentului. În mod implicit, skrollr va forța documentul să fie cel puțin la fel de ridicat ca cel mai mare cadru cheie pe care l-ați definit. În cazul nostru, poziția cea mai îndepărtată a barei de derulare a fost specificată ca fiind 500px, în timp ce pagina noastră este waaa-aay mai înaltă decât asta. Prin urmare, nu am avut nevoie să ne gândim la depășirea forței de înălțime.
Un alt lucru pe care ar trebui să-l faceți este să eliminați derularea lină. Încearcă din nou efectul nostru de parallax; vedeți cum se accelerează și se decelerează poziția imaginii de fundal? Acest lucru împiedică orice jignire, dar s-ar putea să nu doriți ca efectul să apară în acest fel. Pentru a vă face tweening mai liniară, adăugați aceasta:
De asemenea, puteți adăuga acest lucru per element prin încă o dată sprijinindu-se de atributele de date (foarte elegante):
Mod relativ
Este, de asemenea, demn de menționat modul relativ, care ne permite să setăm cadrele cheie în raport cu elementul, nu documentul așa cum am făcut. În acest fel, am putea modifica înălțimea, marginile etc. din antetul nostru (de exemplu) fără a trebui să reevaluăm setările cadrului cheie.
Utilizarea modului relativ modifică sintaxa necesară în atributele de date, pe care nu le voi intra aici, dar merită să aruncați o privire la.
Pentru mai multă idee despre ceea ce este posibil folosind opțiunile skrollr, consultați exemplele și documentația.
14. Asistență mobilă
Iată ceva ce nu știam până nu citesc documentația de tip skrollr:
Browserele mobile încearcă să economisească bateriile oriunde pot. Din acest motiv, browserele mobile întârzie executarea JavaScript în timp ce derulați. În special, iOS face acest lucru foarte agresiv și complet oprește JavaScript.
Prin urmare, pentru ca skrollr să lucreze pe platforme mobile, Alexander a trebuit să construiască un anumit pic de magie extra care este tras înăuntru după un pic de browser-sniffing. După cum ați văzut, efectul nostru se degradează foarte grațios, așa că nu mă deranjează dacă utilizatorii de smartphone lipsesc pe un parallax. Cu toate acestea, dacă doriți să vă asigurați că proiectul dvs. acceptă dispozitive mobile, veți avea nevoie de ceva suplimentar.
- După ce ați inclus scriptul skrollr, va trebui să executați un control al browserului, care arată astfel:
Veți observa că acest lucru se adaugă apoi
skrollr.mobile.min.jsdacă sunt îndeplinite condițiile (adică: un dispozitiv mobil este utilizat), asigurați-vă că calea este corectă conform proiectului. Veți găsi acest script suplimentar în descărcarea sursei pe GitHub.- În cele din urmă, asigurați-vă că primul după deschidere
tag-ul a .Asta e! Nu trebuie să înțelegi De ce care funcționează, pur și simplu face. Dacă sunteți curios să aflați mai multe despre suportul pentru dispozitive mobile, consultați documentația.
Concluzie
Skrollr nu este doar un parallax ... lucru, face mai mult decât atât, așa cum am arătat. Cu orice noroc, totuși, veți fi în stare să implementați un pic de razzmatazz (indiferent de ce este) pe propriile dvs. pagini web statice. Simțiți-vă liber să puneți întrebările pe care le puteți avea în comentarii!
Resurse suplimentare
- skrollr.js pe GitHub
- @Prinzhorn pe Twitter
- Creați un site Parallax Scrolling Utilizând Stellar.js pe Webdesigntuts+
- Merry Scrolling cu skrollr.js
- T'Lipsum Generator Yorkshire Lorem Ipsum pentru oameni din Yorkshire
- fluid_skeleton.css
- CodeKit
- Tentul lui Walton cu privire la Parallax Scrolling pe Web
