Share
Det har vært et av de største webdesign buzz ordene en stund nå, så i dag skal vi prøve vår hånd på litt Parallax. Vi skal sette sammen et enkelt responsivt layout, og deretter ved hjelp av skrollr.js, kommer vi til å bruke en subtil parallell effekt til toppteksten.
Denne opplæringen vil dekke noen få bemerkelsesverdige aspekter, så vær oppmerksom på:
Okei da! La oss slå av prosjektet vårt med noen barnefiler. Dette er hva du må begynne med:
Vår indeks.html er tom for øyeblikket, så har vi en img-katalog med vårt kaffebilde i den, en css-katalog med en tilbakestilt fil pluss vårt fluidnett og en tom styles.css, tålmodig venter på vår inngang. Til slutt har vi en js-katalog med skrollr.js-filen lastet ned fra GitHub.
Vår index.html skal begynne med noen svært kjente elementer:
Meningsløs Pap
Jeg vil ikke bore deg med alle disse bitene, men det er verdt å merke seg at viewport-metakoden er til stede, vi har gitt dokumentet en (nonsensisk) tittel, knyttet til noen favikoner - og det vi har pekt på bare en css-fil: styles.css.
Et lite stilark for å styre dem alle.
Da jeg først snakket om filene og mappene, nevnte jeg tre stylesheets; normalize.css (å ansvarlig tilbakestille våre stiler), fluid_skeleton.css (som jeg har tilpasset meg fra skjelettskjelettet) og de faktiske styles.css. Så hvorfor har vi bare koblet til en i vår HTML-fil?
Vel, vi skal bruke dette som en introduksjon til Sass - uten å bruke noen Sass.
Ved å bruke .scss filtypen i stedet for .css, kan vi trekke dem alle sammen i en fil og redusere hele partiet. Begynn med å endre navn på CSS-filene slik:
Det var lett, ikke sant? Legg merke til underskrifterne på de to første, som forhindrer at filene blir kompilert i sine egne css-ekvivalenter. I stedet skal vi importere dem til våre styles.scss, akkurat som vi ville bruke en vanlig css @ importregel:
/ * import * / @import "normalisere"; @import "fluid_skeleton";
Nå når vi kompilerer, får vi en styles.css-fil bygd opp fra alle reglene i våre .scss-filer. Vi trenger bare å distribuere denne enkeltfilen til vår webserver, og lagrer nettstedet vårt to forespørsler og flere Kbs. Godt jobbet :)
For å faktisk kompilere filene som beskrevet ovenfor, skal vi trenge et kompileringsprogram (med mindre du har lyst til å bruke kommandolinjen?). Det er noen programmer som vil gjøre jobben for deg, jeg bruker CodeKit (fordi det er kjempebra), men CompassApp vil tjene deg like bra, pluss det er tilgjengelig på Windows.
Å sette opp prosjektet vårt er like enkelt som å dra prosjektmappen inn i kompilatoren. CodeKit overvåker nå alle filene i den mappen. Når jeg slår "lagre", uansett hvilken SCSS-fil jeg redigerer, vil CodeKit kompilere alle brikkene, churning ut vår oppdaterte CSS og, hvis vår side er åpen i en nettleser, forfrisker det for oss også.
Selv om du ikke er klar til å se nærmere på Sass, er dette en ideell arbeidsflyt.
La oss nå fylle opp index.html-filen, hvoretter vi virkelig kan begynne på stylingen. Som nevnt bruker jeg fluid_skeleton.css som grunnlag for det responsive nettet. Det er et flott, ukomplisert grunnlag for å sparke et enkelt oppsett. Alt det krever er at vi bruker gridstrukturen for å bygge opp vårt layout.
Vi trenger:
Accentsconagua
.åtte for eksempel totalt seksten sammen.For eksempel kan vi bygge et raskt, fire kolonneoppsett som slik:
Stilarket dikterer at disse divs er alle 100% brede, stablet pent utelukkende av hverandre, til visningsporten treffer 767px bred. På det tidspunktet skifter alt, og disse fire kolonnene sprer seg over skjermen som naturens hensikt.
Denne raske wireframe skal gi deg en ide om hvordan vi skal utforme vår strukturelle markering.
Og hvis du er ute etter en rask kopi / lim, vil dette hjelpe deg ut:
For mer informasjon om hvordan Skeleton er satt sammen, ta en titt på å bygge en responsiv layout med skjelett: Starte ut.
Det er alltid lettere å se hva du gjør når du har litt dummy tekst for å jobbe med, så kaste en overskrift og en lenke til topptekstområdet øverst:
Meningsløs Pap
av Ian Yates
Vær så oppmerksom på kolonnene og bunnteksten. Jeg har tatt en masse filler tekst fra T'Lipsum "En Yorkshire Lorem Ipsum Generator for Yorkshire Folks" (fordi jeg er en stolt Yorkshireman) slo det!
For å gi deg en ide, begynner hovedkroppen (vårt tolv kolonneområde) slik:
Mek er en Brew Lad
En pint 'o mild. Fortell den summen for nå, da har du det, det er kanskje du. Øye opp er det Guds eget fylke. Bli kjent med da Michael Palin Blomin "eck Gerritetten. Ah, lærer du den myke sørlige pansyen. Enhver rooad myk sørlig pansy nobbut en gutt mardy bum shu 'the gob ansiktet som en slapped ass. Ee av tyggegummi mardy bum michael palin. Guds eget fylke. Det er deg. Appens som kanskje Guds eget fylke hvor er Tha bin.
Hold noen koblinger i bunnteksten, og vi er ferdige her!
Før vi går videre, vil jeg få tak i noen fonter. Gå videre til Google Web Fonts og ta en titt på PT Sans og PT Serif. De er en flott duo, så legg dem til samlingen din og samle stilarklenkelen.
For å spare tid, er dette lenken jeg fikk, etter å ha valgt 400 og 700 vektversjonene av hver:
@import url (http://fonts.googleapis.com/css?family=PT+Sans:400,700|PT+Serif:400,700);
Du kan lime inn dette under vår andre import i styles.scss. Når du samler innholdet, vil innholdet i denne CSS-filen ikke bli trukket inn i vårt minifiserte CSS, men @import-regelen forblir og skrifttypen blir brukt helt og holdent.
Nå setter jeg PT Sans som vår grunnfont, og setter skriftstørrelsen til 100% av nettleserens standard, med linjehøyde på 1.5em:
html font: 100% / 1.5em 'PT Sans', sans-serif;
Mye av stylingen vi bruker på denne siden er ganske generisk. Farger og størrelser for typografi, polstring på båndene og så videre. Trekk kildefilene fra hverandre, og du vil finne innholdet i styles.scss selvforklarende.
Men la oss fokusere et øyeblikk på topptekstområdet. I sin mobile første tilstand ønsker vi å gi den en brun bakgrunn. Bare når visningsporten er større, vil vi få inn kaffebildet (for å spare mobilbrukere båndbredden). Slik ser stilene for topptekstbåndet ut akkurat nå:
header.band bakgrunn: # 4b371f; farge: hvit; tekst-align: center; polstring: 10% 0 15% 0;
Polstringstoppen og bunnen har blitt brukt som en prosentandel av nettleserbredden. Dette betyr at overskriftsområdet vokser i høyde når nettleservinduet utvides. Det er en ganske fin effekt og holder folden (uansett hvor den er i disse dager) proporsjonal med nettleservinduets størrelse.
La oss nå stilen overskriften vi har i den.
h1, h2, h3 font-family: 'PT Serif', serif; font-weight: 700; tekst-align: center; header.band h1 font-size: 3em; linjehøyde: 1em; margin-bunn: 1em;
Vi bruker PTs serifvariant til våre overskrifter, som passer godt med kroppseksemplet som er i sans.
Til slutt vil vi stile vårt anker for å få det til å skille seg ut:
a.button bakgrunn: # e33f0c; tekst-align: center; polstring: .5em 1em; farge: hvit; font-weight: bold; tekst-dekorasjon: ingen; boks-skygge: 0 0.2em 0 # ab3009; tekst-transformer: store bokstaver; Letter-avstand: 0.1em; / * Overgang på tvers av nettleseren * * -webkit-overgang: bakgrunn 0.2s utelukkelse; / * Safari 3.2+, Chrome * / -moz-overgang: bakgrunn 0.2s utelukkelse; / * Firefox 4-15 * / -o-overgang: bakgrunn 0.2s utelukkelse; / * Opera 10.5-12.00 * / overgang: bakgrunn 0.2s utilsiktet; / * Firefox 16+, Opera 12.50+ * / a.button: svever bakgrunn: # ab3009;
Rettferdige ting, alle embaserte for å sikre at den kan vokse og krympe hvis det er behov - og hvis du virkelig skal omfavne Sass, kan du gjøre alle stiler enda slankere! For nå skjønt, dette er hva du burde ha:
Etter å ha bygget vår grunnleggende mobile opplevelse, la oss nå pynte ting for større skjermer. Hvordan du velger å ordne medieforespørsler, er opp til deg, men siden dette er et ganske ukomplisert stilark, skal jeg bare ha alle mine ekstra regler i en medieforespørsel på slutten av styles.scss.
La oss legge til noen regler som vil sparke inn på skjermer som er større enn 767px. Dette bruddpunktet er ganske vilkårlig og skjedde akkurat slik at designen da jeg først bygde den. Hvilken bedre måte å velge et bruddpunkt på?!
@media bare skjerm og (min bredde: 767px)
Det er egentlig ikke mange stiler å legge til her, vi vil bare øke skriftstørrelsen som brukes i hele dokumentet, gjøre knappen vår litt mer fremtredende og legg til et bakgrunnsbilde til topptekstområdet:
@media bare skjerm og (min-bredde: 767px) body font-size: 1,125em; / * 18px / 16px * / linjehøyde: 1,7em; header.band bakgrunnsbilde: url (... /img/background.jpg); bakgrunnsstørrelse: 100%; header.band h1 font-size: 3.25em; / * 52/16 * / a.button polstring: .75em 1.5em;
På større skjermer bør vi nå ha noe som ...
For tiden, når du ruller nedover siden, forsvinner vår overskrift fra visningen mye som du forventer. La oss nå komme til grunn for hele denne øvelsen; parallakse. Du burde allerede ha lastet ned skrollr.js fra GitHub og plassert den i js-mappen.
Deretter må vi referere det i vår html, så legg denne linken nederst, før avslutningen
Dette er en vanilje JavaScript-spilling, så vi trenger ikke å trekke inn jQuery på forhånd. Deretter må vi ringe skrollr, som vi liker slik:
Det finnes en rekke alternativer som vi kan leke rundt med, som alle har innstillinger vi kan kaste inn mellom de krøllete båndene, men for nå skal vi legge ting nøyaktig slik de er.
I dagens utviklingsstadium krever skrollr oss å slakte vår markering litt, og legge til regler inline på elementene våre. Skrollrs produsent Alexander Prinzhorn er opptatt av et prosjekt som skiller stiler fra markup, men det er fortsatt i gang.
Uansett, jeg gjør det lyden verre enn det er, vi er bare pålagt å legge til vår keyframe styling til dataattributter på elementene vi målretter mot. For eksempel, la oss flytte bakgrunnsbilledposisjonen til toppteksten, avhengig av rulleposisjonen.
Vi legger til vår første keyframe styling slik:
Skrollr bruker data- og deretter en verdi som representerer pekelposisjonen på rullefeltet. Vi legger til noen styling akkurat som vi ville med CSS. Vi har bokstavelig talt bare angitt det når rullefeltet er på 0px (toppen av siden) vi vil ha Bakgrunnen-stilling av dette elementet å være 0px 0px.
Vi kan da legge til så mange andre keyframes som vi liker, så la oss kaste et nytt datatributt i, rett etter vår første.
data-500 = "bakgrunnsposisjon: 0px -250px;"
Dette sier da; når rullefeltet har flyttet 500px ned, vi vil ha Bakgrunnen-stilling å være 0px -250px (dvs.: 250px oppover). Skrollr vil animere prosessen mellom disse to nøkkelrammene, slik at vi får en jevn overgang.
Bingo! Vår første parallax effekt.
Vi har oppnådd en veldig enkel parallax-effekt som legger til et element av dynamikk når brukeren ruller nedover. Vi kan søke uansett CSS regler vi ønsker med skrollr, så la oss gi vår toppregion en siste blomstring.
Husk dette elementet, som inneholder overskriften og lenken?
Vi skal legge til to keyframes; en for den opprinnelige tilstanden (0px) og en annen for når rullebommen når 180px.
Disse, som du ser, dikterer opaciteten, en annen kjent CSS-egenskap. Når rullebjelken beveger seg ned, før overskriften helt har forlatt siden, vil innholdet i denne diven forsvinne jevnt. En enkel effekt, men en som subtly påvirker brukeropplevelsen av denne siden. Ting som dette skal brukes ansvarlig!
13. Ekstra innstillinger
Skrollr leveres med flere ekstra alternativer, avhengig av hvor trygg du føler deg. Alle disse innstillingene kan sendes til skrollr ved hjelp av nøkkelverdige par som slik:
Denne instruksjonen for eksempel forteller skrollr for ikke å tvinge dokumentets høyde. Som standard vil skrollr tvinge dokumentet til å være minst like høyt som den høyeste nøkkelrammen du har definert. I vårt tilfelle ble vår lengste rullestangsposisjon spesifisert som 500px, mens siden vår er høyere enn den. Vi trengte derfor ikke å tenke over å tvinge høyden.
En annen ting du kanskje vil gjøre er å fjerne glatt rulling. Prøv vår parallax effekt en gang til; ser du hvordan bakgrunnsbilledposisjonen akselererer og avtar? Det forhindrer uklarhet, men du vil kanskje ikke at effekten skal vises på den måten. Å lage din tweening mer lineær, legg til dette:
Du kan også legge til dette per element ved igjen å lene seg på de (veldig elegante) dataattributtene:
Relativ modus
Det er også verdt å nevne relativ modus, noe som gjør at vi kan sette nøkkelrammer i forhold til elementet, ikke dokumentet som vi har gjort. På denne måten kan vi endre høyden, margene osv. Av vår overskrift (for eksempel) uten å måtte revurdere våre keyframe-innstillinger.
Ved hjelp av relativ modus endres syntaksen som trengs i dataattributtene, som jeg ikke vil gå inn her, men det er vel verdt å ta en titt på.
For mer ide om hva som er mulig med skrollrs alternativer, sjekk ut eksemplene og dokumentasjonen.
14. Mobil støtte
Her er noe jeg ikke visste før jeg leste skrollr dokumentasjonen:
Mobilbrowsere prøver å spare batteri hvor de kan. Det er derfor mobile nettlesere forsinker utførelsen av JavaScript mens du ruller. spesielt iOS gjør dette veldig aggressivt og helt stopper JavaScript.
Derfor, for å kunne skrollr å jobbe på mobile plattformer, måtte Alexander bygge en spesiell bit ekstra magi som ble trukket inn etter litt nettleser-sniffing. Som du har sett, degraderer effekten oss veldig grasiøst, så jeg er ikke plaget av at smarttelefonbrukere savner litt parallax. Men hvis du vil sørge for at prosjektet ditt støtter mobil, trenger du ekstra noe.
- Etter at du har tatt med skrollr-skriptet, må du kjøre en vekk nettleserkontroll som ser slik ut:
Du vil legge merke til at dette legger til
skrollr.mobile.min.jsHvis betingelsene er oppfylt (dvs.: en mobil enhet blir brukt), må du bare sørge for at banen er riktig i henhold til prosjektet. Du finner dette ekstra skriptet i kilde nedlastingen på GitHub.- Til slutt, sørg for at først element etter åpningen
tag har .Det er det! Du trenger ikke å forstå Hvorfor det fungerer, det gjør det bare. Hvis du er nysgjerrig på å lære mer om mobilstøtte, ta en titt på dokumentasjonen.
Konklusjon
Skrollr er ikke bare en parallax ... ting, det gjør mye mer enn det vi har vist. Med noe flaks skjønt, har du nå klart å implementere litt razzmatazz (hva som helst) til dine egne statiske websider. Du er velkommen til å stille spørsmål du måtte ha i kommentarene!
Ytterligere ressurser
- skrollr.js på GitHub
- @Prinzhorn på Twitter
- Opprett et Parallax Scrolling nettsted ved hjelp av Stellar.js på Webdesigntuts+
- Merry Scrolling med skrollr.js
- T'Lipsum En Yorkshire Lorem Ipsum Generator for Yorkshire Folks
- fluid_skeleton.css
- CodeKit
- Trent Waltons tanker om Parallax Scrolling på nettet
