I dag skal vi se på noen få teknikker vi kan bruke til å vise fremdrift for ruller for brukere som leser en side. Denne teknikken brukes på et økende antall steder, og med god grunn; Det gir en kontekstuell forståelse av investeringer som trengs for å konsumere en bestemt side. Som brukeren ruller, presenteres de med en følelse av gjeldende fremgang i forskjellige formater.
Som sett på ia.net
I dag skal vi dekke to spesifikke teknikker du kan ansette for å vise fremdriftshastighet, og gi deg et verktøy for å lage ditt eget. La oss komme i gang!
Sette opp dokumentet
Først vil vi sette opp et spotta dokument som vil fungere som vår innleggsside. Vi skal bruke normalize.css og jQuery, samt en Google-skrifttype. Din tomme HTML-fil skal se slik ut:
Progress Indicator Animation
Deretter legger vi til vårt falske innleggsinnhold:
Hvordan skal vi vise fremgang mens du ruller et innlegg?
Kjæresten er dum i sitt hjem, og er en avgjørende forfatter.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ulticies eget, tid er satt, ante. Donec eu libero sit amet quam egestas sempre. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec ikke en gang i turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id kurs faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Alquam erat volutpat. Namn min, Tincidunt Quis, Accumsan Porttitor, facilisis luctus, metus
Dette gir oss nok innhold til å teste våre rullende atferd.
Grunnleggende stilering
Vi skal bruke noen grunnleggende styling for å gjøre innlegget litt mer attraktivt.
For å beregne rulleposisjonen må vi forstå konseptuelt hva vi sporer. Siden JavaScript bare kan spore topprulleverdien, må vi spore vår rulleverdi fra 0 (øverst, ikke rullet) til hva den endelige rulleverdien er. Den endelige rullingsverdien vil være lik den totale dokumentlengden minus høyden på selve vinduet (fordi dokumentet vil rulle til bunnen av dokumentet når bunnen av vinduet).
Vi bruker følgende JavaScript for å beregne denne rulleposisjonen.
(funksjon () var $ w = $ (vindu); var wh = $ w.height (); var h = $ ('kropp'). høyde (); var sHeight = h - wh; $ w.on 'scroll', funksjon () var perc = Math.max (0, Math.min (1, $ w.scrollTop () / sHeight));;
Koden ovenfor angir vinduets høyde og kroppshøyden, og når brukeren ruller, bruker den disse verdiene til å angi a perc variabel (kort for prosentandel). Vi benytter også Math.min og Math.max å begrense verdiene til 0-100-serien.
Med denne prosentberegningen kan vi kjøre fremdriftsindikatoren.
Sirkelindikator
Den første indikatoren vi skal opprette, er en SVG-sirkel. Vi vil benytte SVG slag-dasharray ogslag-dashoffset egenskaper for å vise fremgang. Først må vi legge frem fremdriftsindikatoren til dokumentet.
Denne markeringen gir oss to sirkler i en SVG, samt en inneholdende div for å vise prosentandelen vår. Vi må også legge til stil på disse elementene, og så forklarer vi hvordan disse kretsene er plassert og animert.
Disse stilene gjør oss i stand til å animere vårt sirkelelement. Vår fremgang bør alltid være synlig, så vi stiller posisjonen fast på .fremgang-indikatoren klasse, med posisjonering og størrelsesregler. Vi setter også vår fremgangstelling til å være sentrert både vertikalt og horisontalt inne i denne div.
Sirklene er plassert i midten ved hjelp av transformasjon på SVG-elementene selv. Vi starter senterets sirkler ved hjelp av transformasjon. Vi bruker en teknikk her som tillater oss å bruke en rotasjon fra midten av våre kretser for å starte animasjonen øverst i sirkelen (i stedet for høyre side av sirkelen). I SVG brukes transformasjoner fra øverste venstre side av et element. Dette er grunnen til at vi må sentrere våre sirkler på 0, 0, og flytt sirkelsenteret til sentrum av SVG selv ved å bruke oversette (50, 50).
Bruke slag-dasharray og stroke-dashoffset
Egenskapene slag-dasharray ogslag-dashoffset tillat oss å animere slag av en SVG. slag-dasharray definerer de synlige delene av et slag. slag-dashoffset beveger starten på streken. Disse egenskapene kombinert gir oss mulighet til å lage en "keyframing" -prosess.
Oppdaterer strekk-dasharray på Scroll
Deretter legger vi til en funksjon for å oppdatere strekkdasharrayet på bla, ved hjelp av vår prosentvise fremgang som tidligere ble vist.
(funksjon () var $ w = $ (vindu); var $ sirk = $ ('animert sirkel'); var $ progCount = $ ('progress-count'); var wh = $ w.height ), var h = $ ('kropp'). høyde (); var sHeight = h - wh; $ w.on ('rulle', funksjon () var perc = Math.max (0, Math.min ($) ; $ progCount.html (Math.round (perc * 100) + "%"); ());
Forskjellen som samsvarer med sirkelen vår, er omtrent 126. Det er viktig å merke seg at dette ikke vil fungere for alle sirkler, da 126 er omkretsen av en sirkel med en radius på 20. For å beregne strekkdashoffsetet for en gitt sirkel, mutiply radius med 2PI. I vårt tilfelle vil den nøyaktige forskyvningen være 20 * 2PI = 125,66370614359172.
Horisontal fremgangsvariasjon
For vårt neste eksempel, lager vi en enkel, horisontal bar fast til toppen av vinduet. For å oppnå dette, bruker vi en tom fremdriftsindikator div.
Merk: Vi har lagt til "-2" for å tillate oss å inkludere dette eksemplet i samme CSS-fil.
Deretter legger vi til stilen vår for dette elementet.
Til slutt vil vi sette bredden på fremdriftslinjen på bla.
var $ prog2 = $ ('fremdriftsindikator-2'); funksjonoppdateringProgress (perc) $ prog2.css (bredde: perc * 100 + '%');
Alt sammen, vår siste JavaScript skal se slik ut:
(funksjon () var $ w = $ (vindu); var $ sirk = $ ('animert sirkel'); var $ progCount = $ ('progress-count'); var $ prog2 = $ ('. fremdriftsindikator-2 '); var wh = $ w.height (); var h = $ (' kropp '). høyde (); var sHeight = h - wh; $ w.on ) var perc = Math.max (0, Math.min (1, $ w.scrollTop () / sHeight)); oppdateringProgress (perc);); funksjonoppdateringProgress (perc) var circle_offset = 126 * perc; $ sirk.css ("slag-dashoffset": 126 - circle_offset); $ progCount.html (Math.round (perc * 100) + "%"); $ prog2.css (bredde: perc * 100 + '% '); ());
Andre ideer for fremgangsstenger
Denne artikkelen er ment å gi deg verktøy og inspirasjon for å designe dine egne fremdriftsløsninger. Andre ideer for fremdriftsfelt kan inkludere bruk av mer beskrivende eller humaniserte betingelser for selve fremdriftsindikasjonen, for eksempel "halvveis der" eller "bare å komme i gang". Noen implementeringer (som ia.net-eksemplet vist tidligere) bruker estimering av en artikkel lesetid. Dette kan estimeres ved hjelp av kode som ligner på følgende:
var ordPerMin = 300; // basert på denne artikkelen: http://www.forbes.com/sites/brettnelson/2012/06/04/do-you-read-fast-enough-to-be-successful/ var wordsArray = $ (". artikkel-innhold "). tekst (). split (" "); var wordCount = ordArray.length; var minCount = Math.round (wordCount / wordsPerMin);
Du vil da bruke minCount i forbindelse med perc variabel vi oppdaterer på rulle for å vise leseren sin gjenværende tid for å lese artikkelen. Her er en veldig grunnleggende implementering av dette konseptet.
funksjonoppdateringProgress (perc) var minutesCompleted = Math.round (perc * minCount); var resterende = minCount - minutterFullført; hvis (gjenværende) $ ("fremdriftsindikator"). show (). html (resterende + "resterende minutter"); ellers $ ("fremdriftsindikator"). skjul ();
Ett siste stykke: Adaptiv skjermstørrelse
For å sikre at vår fremdriftsindikator fungerer som den skal, bør vi sørge for at vår matte beregner de riktige tingene på de riktige tidspunktene. For at det skal skje, må vi sørge for at vi beregner høydene og oppdaterer fremdriftsindikatoren når brukeren endrer størrelsen på vinduet. Her er en tilpasning av JavaScript for å få det til å skje:
(funksjon () var $ w = $ (vindu); var $ sirk = $ ('animert sirkel'); var $ progCount = $ ('progress-count'); var $ prog2 = $ ('. fremdriftsindikator-2 '); var wh, h, sHeight; funksjon setSizes () wh = $ w.height (); h = $ (' body '). høyde (); sHeight = h - wh; setSizes (); $ w.on ('scroll', funksjon () var perc = Math.max (0, Math.min (1, $ w.scrollTop () / sHeight)); updateProgress (perc);). på ('resize', funksjon () setSizes (); $ w.trigger ('scroll');); funksjonoppdateringProgress (perc) var circle_offset = 126 * perc; $ circ.css ("stroke-dashoffset ": 126 - circle_offset); $ progCount.html (Math.round (perc * 100) +"% "); $ prog2.css (bredde: perc * 100 + '%'); ;
Denne koden erklærer en funksjon som angir variablene vi trenger for å beregne fremdriften ved en hvilken som helst skjermstørrelse, og samtaler som fungerer på resize. Vi utløser også rullegardinmenyen på vinduet slik at vår updateProgress funksjonen utføres.
Du har nådd slutten!
Etter å ha lagt grunnlaget for et hvilket som helst antall varianter, hva kan du komme med? Hvilke fremdriftsindikatorer har du sett det arbeidet? Hva med indikatorer som er dårlige for brukervennlighet? Del dine erfaringer med oss i kommentarene!
Accentsconagua
Share
Som sett på ia.net
