Share
Det har varit ett av de största webbdesignerna i ett tag nu, så idag ska vi försöka vår hand på lite Parallax. Vi ska sätta ihop en enkel responsiv layout och sedan med hjälp av skrollr.js kommer vi att applicera en subtil parallell effekt till rubriken.
Denna handledning kommer att omfatta några anmärkningsvärda aspekter, så uppmärksamma:
Okej då! Låt oss sparka av vårt projekt med några nakna benfiler. Det här är vad du behöver börja med:
Vårt index.html är tomt för närvarande, då har vi en img-katalog med vår kaffebild inom den, en css-katalog med en återställningsfil plus vårt fluidnät och en tom styles.css, tålmodigt väntar på vår inmatning. Slutligen har vi en js-katalog med skrollr.js-filen hämtad från GitHub.
Vårt index.html börjar med några mycket kända element:
Meningslös Pap
Jag kommer inte att borra dig med alla dessa bitar, men det är värt att notera att viewport-metakoden är närvarande, vi har gett dokumentet en (nonsensisk) titel, kopplad till vissa favicons - och det har vi pekat på bara en css-fil: styles.css.
Ett litet stilark för att styra dem alla.
När jag först talade om filerna och mapparna nämnde jag tre stylesheets; normalize.css (för att på ett ansvarsfullt sätt återställa våra stilar), fluid_skeleton.css (som jag har anpassat mig från skelettpanna) och de verkliga styles.css. Så varför har vi bara kopplat till en i vår HTML-fil?
Tja, vi ska använda detta som en introduktion till Sass - utan att egentligen använda någon Sass.
Genom att använda .scss filtillägg istället för. Css kan vi dra dem alla i en fil och minska hela partiet. Börja med att byta namn på CSS-filerna så här:
Det var lätt, eller hur? Lägg märke till underskrifterna på de första två, som förhindrar att dessa filer sammanställs i sina egna css-ekvivalenter. Istället kommer vi att importera dem till våra styles.scss, precis som vi skulle använda en vanlig css @ importregel:
/ * import * / @import "normalisera"; @import "fluid_skeleton";
Nu när vi sammanställer får vi en styles.css-fil uppbyggd från alla regler i våra .scss-filer. Vi behöver bara distribuera denna enda fil till vår webbserver, vilket sparar vår webbplats två förfrågningar och flera Kbs. Bra jobbat :)
För att faktiskt kompilera filerna som beskrivits ovan behöver vi en kompileringsprogram (om du inte vill använda kommandoraden?). Det finns några applikationer som gör jobbet för dig, jag använder CodeKit (eftersom det är fantastiskt) men CompassApp kommer att tjäna dig lika bra, plus det är tillgängligt på Windows.
Att sätta upp vårt projekt är lika enkelt som att dra projektmappen i kompilatorn. CodeKit tittar nu på alla filer i den mappen. När jag slår "spara", oavsett vilken SCSS-fil jag redigerar, kommer CodeKit att kompilera alla bitar, churning ut vår uppdaterade CSS och, om vår sida är öppen i en webbläsare, uppfriskar det för oss också.
Även om du inte är redo att titta längre in i Sass så är det här ett perfekt arbetsflöde.
Låt oss nu fylla i index.html-filen, varefter vi verkligen kan börja på styling. Som nämnts använder jag fluid_skeleton.css som underlag för det lyhörda nätet. Det är en stor, okomplicerad grund för att sparka upp en enkel layout. Allt som krävs är att vi använder sin rutnätstruktur för att bygga upp vår layout.
Vi behöver:
Accentsconagua
.åtta till exempel totalt sexton alla tillsammans.Till exempel kan vi bygga en snabb fyra kolumnlayout som så:
Styckebladet dikterar att dessa divs är alla 100% breda, staplade snyggt ontop av varandra, tills viewporten träffar 767px bred. Vid den tiden ändras allt och dessa fyra kolumner kommer att sprida sig över skärmen som naturen är avsedd.
Denna snabba trådram skulle ge dig en uppfattning om hur vi ska utforma vår strukturella markup.
Och om du är ute efter en snabb kopia / klistra in, så hjälper det dig ut:
För mer information om hur Skeleton sätts ihop, ta en titt på Att bygga en responsiv layout med skelett: Starta ut.
Det är alltid lättare att se vad du gör när du har lite dummy-text att arbeta med, så kasta en rubrik och en länk till topprubriken längst upp:
Meningslös Pap
av Ian Yates
Vänd sedan uppmärksamheten på kolumnerna och sidfoten. Jag har tagit en massa fyllnadstext från T'Lipsum "En Yorkshire Lorem Ipsum Generator för Yorkshire Folks" (eftersom jag är en stolt Yorkshireman) slog det!
För att ge dig en idé börjar huvudkroppen (vårt tolv kolumnområde) så här:
Mek är en Brew Lad
En pint "o mild. Berätta för den här summen för att du nu ska ha chuffin nora eeh appens som kanske. Ögon är det ditt guds eget län. Var reet nah då michael palin bloomin "eck gerritetten. Han lär dig den mjuka södra pansyen. Någon rooad mjuk södra pansy nobbut en kille mardy bum shu 'thi gob ansikte som en slapped ass. Ee med tuggummi mardy bum michael palin. Guds eget län. Du behöver dig. Appens som kanske guds eget län där är tha bin.
Stick några länkar i sidfoten och vi är färdiga här!
Innan vi går längre vill jag ta några teckensnitt. Gå vidare till Google Web Fonts och ta en titt på PT Sans och PT Serif. De är en bra duo, så lägg till dem båda till din samling och samla stilarklänken.
För att spara tid är det länken jag fick, med valet av 400 och 700 viktversioner av varje:
@import url (http://fonts.googleapis.com/css?family=PT+Sans:400,700|PT+Serif:400,700);
Du kan klistra in det här under vår andra import i styles.scss. När det sammanställs, kommer innehållet i den här CSS-filen inte faktiskt att släppas in i vår minifierade CSS, men @import-regeln kommer att förbli och teckensnittet kommer att användas alldeles samma.
Nu ställer jag in PT Sans som vårt basfont, och ställer in teckensnittstorleken till 100% av webbläsarens standard med sin linjehöjd på 1.5em:
html font: 100% / 1.5em 'PT Sans', sans-serif;
Mycket av den stil som vi tillämpar på denna sida är ganska generisk. Färger och storlekar för typografi, vaddering på banden och så vidare. Dra källfilerna ifrån varandra och du hittar innehållet i styles.scss självförklarande.
Låt oss dock fokusera ett ögonblick på rubrikområdet. I sitt mobila första tillstånd vill vi ge den en brun bakgrund. Bara när visningsporten är större kommer vi att ta in kaffeprofilen (för att spara mobila användare bandbredd). Så här ser stilarna för toppbandet ut nu:
header.band background: # 4b371f; färg vit; text-align: center; vaddering: 10% 0 15% 0;
Polstringens topp och botten har applicerats som en procentandel av webbläsarens bredd. Det betyder att rubrikområdet växer i höjd när webbläsarfönstret expanderar. Det är en ganska fin effekt och håller veckan (var den än är) i proportion till webbläsarfönstret.
Låt oss nu utforma rubriken vi har inom den.
h1, h2, h3 font-family: 'PT Serif', serif; font-vikt: 700; text-align: center; header.band h1 font-size: 3em; linjehöjd: 1em; marginal-botten: 1em;
Vi använder PTs serifvariant för våra rubriker, vilket parar väl med kroppskopian som finns i sans.
Slutligen stryker vi vårt ankar för att få det att stå ut:
a.button bakgrund: # e33f0c; text-align: center; vaddering: .5em 1em; färg vit; font-weight: bold; text-dekoration: ingen; boxskugga: 0 0.2em 0 # ab3009; text-transform: stor bokstav; brevavstånd: 0.1em; / * Övergångs-webbläsare-saker * / -webkit-övergång: Bakgrund 0.2s Lättnad; / * Safari 3.2+, Chrome * / -moz-övergång: bakgrund 0.2s uthyrning; / * Firefox 4-15 * / -o-övergång: bakgrund 0.2s lätthet; / * Opera 10.5-12.00 * / övergång: bakgrund 0.2s uthyrning; / * Firefox 16+, Opera 12.50+ * / a.button: sväva bakgrund: # ab3009;
Rättvisa saker, alla embaserade för att säkerställa att den kan växa och krympa om det behövs - och om du verkligen kommer att omfamna Sass kan du göra allt fortfarande styling ännu slankare! För nu men det här är vad du borde ha:
Vi har byggt vår grundläggande mobila upplevelse, låt oss nu pynta saker för större skärmar. Hur du väljer att ordna dina mediefrågor är upp till dig, men eftersom detta är ett ganska okomplicerat stilark, kommer jag bara att stapla alla mina extra regler till en mediefråga i slutet av styles.scss.
Låt oss lägga till några regler som kommer att sparka in på skärmar större än 767px. Denna brytpunkt är ganska godtycklig och hände just att passa designen när jag först byggde den. Vilket bättre sätt att välja en brytpunkt?!
@media-skärm och (min-bredd: 767px)
Det finns faktiskt inte många stilar att lägga till här, vi vill bara öka fontstorleken som används i dokumentet, göra vår knapp lite mer framträdande och lägga till en bakgrundsbild till rubrikområdet:
@media bara skärm och (min bredd: 767px) kropp font-size: 1.125em; / * 18px / 16px * / linjehöjd: 1,7em; header.band background-image: url (... /img/background.jpg); bakgrundsstorlek: 100%; header.band h1 font-size: 3.25em; / * 52/16 * / a.knapp padding: .75em 1.5em;
På större skärmar borde vi nu ha något liknande ...
För närvarande, när du rullar ner på sidan försvinner vår rubrik från synvinkel som du förväntar dig. Låt oss nu komma till grund för hela denna övning; parallax. Du borde redan ha laddat ner skrollr.js från GitHub och placerade den i mappen js.
Därefter måste vi hänvisa till det i vår html, så placera den här länken längst ner, före stängningen
Detta är ett vanilj JavaScript-spel, så vi behöver inte dra in jQuery på förhand. Därefter måste vi ringa skrollr, vilket vi tycker om så:
Det finns ett antal alternativ som vi kan leka runt med, som alla har inställningar vi kan kasta in mellan de krökta axlarna, men för tillfället lämnar vi saker exakt som de är.
I sitt nuvarande utvecklingsstadium kräver skrollr oss att slakta vår markering lite, lägga till regler inline på våra element. Skrollrs tillverkare Alexander Prinzhorn är upptagen med ett projekt som skiljer stilar från markup, men det är fortfarande på gång.
Hur som helst, jag gör det låter sämre än det är, vi är helt enkelt skyldiga att lägga till vår keyframe styling till datatribut på de element som vi riktar in. Till exempel, låt oss flytta bakgrundsbildpositionen i vår rubrik, beroende på rullningspositionen.
Vi lägger till vår första keyframe styling så här:
Skrollr använder data- och sedan ett värde som representerar rullpunktens pixelposition. Vi lägger sedan till en styling precis som vi skulle med CSS. Vi har bokstavligen bara specificerat det när rullningsrullen är på 0px (toppen av sidan) vi vill ha bakgrund-positionen av detta element att vara 0px 0px.
Vi kan sedan lägga till så många andra keyframes som vi vill, så låt oss kasta ett annat data attribut direkt efter vår första.
data-500 = "bakgrundsställning: 0px -250px;"
Detta säger då; när rullningsfältet har flyttat 500px ner, vi vill ha bakgrund-positionen att vara 0px -250px (dvs: 250px uppåt). Skrollr kommer att animera processen mellan dessa två nyckelbilder, så vi får en smidig övergång.
Bingo! Vår första parallax effekt.
Vi har uppnått en mycket enkel parallell effekt som lägger till ett dynamiskt element när användaren rullar neråt. Vi kan ansöka oavsett CSS regler vi vill ha med skrollr, så låt oss ge vår toppregion en sista blomstring.
Kom ihåg det här elementet, som innehåller rubriken och länken?
Vi ska lägga till två nyckelbilder; en för initialtillståndet (0px) och en annan för när rullningsrullen når 180px.
Dessa, som du kan se, dikterar opaciteten, en annan välbekant CSS-egenskap. När vår rullningsruta går ner, innan rubriken helt har lämnat sidan, kommer innehållet inom den här diven att smyga smidigt bort. En enkel effekt, men en som subtly påverkar användarupplevelsen av den här sidan. Saker som detta bör användas ansvarsfullt!
13. Extra inställningar
Skrollr levereras med flera extra alternativ, beroende på hur säker du känner. Alla dessa inställningar kan skickas till skrollr med hjälp av nyckelvärdespar som så:
Denna instruktion säger till exempel att skrollr inte tvingar dokumentets höjd. Som standard kommer skrollr att tvinga dokumentet att vara minst lika högt som den högsta nyckelramen du har definierat. I vårt fall anges vår längsta rullningsposition som 500px, medan vår sida är väldigt högre än den. Vi behövde därför inte tänka på att tvinga höjden att tvingas.
En annan sak du kanske vill göra är att ta bort den smidiga rullningen. Prova vår parallax effekt en gång till; ser du hur bakgrundsbildpositionen accelererar och retarderar? Det förhindrar något ryck, men du kanske inte vill att effekten ska visas på det sättet. Att göra din tweening mer linjär, lägg till detta:
Du kan också lägga till det här per element genom att återigen luta sig till de (mycket eleganta) dataegenskaperna:
Relativläge
Det är också värt att nämna relativläge, vilket gör att vi kan ställa in nyckelbilder i förhållande till elementet, inte dokumentet som vi har gjort. På så sätt kan vi ändra höjden, marginalerna etc. i vår rubrik (till exempel) utan att behöva ompröva våra nyckelramsinställningar.
Om du använder relativläget ändras den syntax som behövs inom datatributen, som jag inte kommer att gå in här, men det är väl värt att kolla på.
För mer information om vad som är möjligt med skrollrs alternativ, kolla in exemplen och dokumentationen.
14. Mobilt stöd
Här är något jag inte visste förrän jag läste skrollr dokumentationen:
Mobila webbläsare försöker spara batteri var de än kan. Därför fördröjer mobila webbläsare körningen av JavaScript medan du bläddrar. iOS i synnerhet stannar detta mycket aggressivt och helt och hållet JavaScript.
För att skrollr ska kunna arbeta på mobila plattformar måste Alexander därför bygga en viss bit extra magi som dras in efter lite webbläsarsniffning. Som du har sett, försämrar vår effekt mycket graciöst, så jag bryr mig inte om att smartphone-användare saknar lite parallax. Men om du vill se till att ditt projekt stöder mobil, behöver du extra något.
- När du har inkluderat skrollr-skriptet måste du köra en webbläsarkontroll som ser ut så här:
Du märker att det här lägger till
skrollr.mobile.min.jsOm villkoren är uppfyllda (dvs: en mobil enhet används), se till att banan är korrekt enligt ditt projekt. Du hittar detta extra skript i källhämtningen på GitHub.- Slutligen, se till att först element efter öppningen
taggen har .Det är allt! Du behöver inte förstå Varför det fungerar bara det. Om du är nyfiken på att lära dig mer om mobilt support, ta en titt på dokumentationen.
Slutsats
Skrollr är inte bara en parallax ... sak, det gör mycket mer än det som vi har visat. Med all lycka har du nu kunnat genomföra lite razzmatazz (vad som helst) till dina egna statiska webbsidor. Ställ dig frågan om eventuella frågor i kommentarerna!
Ytterligare resurser
- skrollr.js på GitHub
- @Prinzhorn på Twitter
- Skapa en Parallax Scrolling-webbplats med Stellar.js på Webdesigntuts+
- Glatt Scrolling med skrollr.js
- T'Lipsum En Yorkshire Lorem Ipsum Generator för Yorkshire Folks
- fluid_skeleton.css
- CodeKit
- Trent Waltons tankar om Parallax Scrolling på webben
