Cum se construiește un indicator de progres al scroll-ului cu jQuery și SVG

Astăzi vom analiza câteva tehnici pe care le putem folosi pentru a afișa progresul derulării pentru utilizatorii care citesc o pagină. Această tehnică este utilizată pe un număr tot mai mare de site-uri și pentru un motiv bun; oferă o înțelegere contextuală a investițiilor necesare pentru a consuma o anumită pagină. Pe măsură ce utilizatorul scroll, acestea sunt prezentate cu un sentiment al progresului actual în diferite formate.

După cum se vede pe ia.net

Astăzi vom acoperi două tehnici specifice pe care le puteți utiliza pentru a afișa progresul parcurgerii și vă va lăsa cu un set de instrumente pentru a vă crea propriul. Să începem!

Configurarea documentului

În primul rând, vom înființa un document mock, care va acționa ca pagină de post. Vom folosi normalize.css și jQuery, precum și un font Google. Fișierul HTML gol ar trebui să arate astfel:

   Evoluția indicatorului de progres

Apoi, vom adăuga conținutul nostru de mesaje false:

     Cum ar trebui să arătăm progresul în timp ce derulează un mesaj? 
 
     Lorem ipsum dolor stați amet, consectetur adipisicing elit. 
 
  Pellentesque habitat morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricii eget, temporal sit amet, ante. Donec eu libero stai amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque stau amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentul sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Nu te opri în turp pulvinar facilisis. Ut felis. Cuvinte cheie: cursuri, cursuri, cursuri, cursuri, cursuri, evenimente Aș dori să mă eliberez. Nam dui mi, tincidunt quis, cumsan porttitor, facilisis luctus, metus
  
 
 
  Citiți în continuare:
Cum pun în aplicare un foobar?

Acest lucru ne oferă suficiente conținuturi pentru a testa comportamentele de defilare.

Styling de bază

Vom folosi un stil de bază pentru a face postul nostru mai atractiv.

@import url (http://fonts.googleapis.com/css?family=Domine:400,700); corp font-size: 16px;  h1, h2, h3, h4, h5, h6 font-family: "Domine", sans-serif;  h1 font-size: 3.5;  .priorire culoare: #fff; greutatea fontului: 400; padding: 60px 0; fundal-culoare: # 0082FF;  antetul articolului border-top: 3px solid # 777; padding: 80px 0;  .article-content font-size: 1em; greutatea fontului: 100; linia-înălțime: 2.4;  p marja: 4em 0;  .container width: 700px; marja: 0 auto;  footer text-aliniere: centru; fundal-culoare: # 666; culoare: #fff; padding: 40px 0; margin-top: 60px;  .read-următor font-size: 2em;

Defilare Poziție Calculare

Pentru a calcula poziția noastră de defilare, trebuie să înțelegem conceptual ce urmărim. Din moment ce JavaScript poate urmări numai valoarea de deplasare de vârf, va trebui să urmărim valoarea de defilare de la 0 (în partea de sus, fără derulare) la valoarea finală de defilare. Această valoare de defilare finală va fi egală cu lungimea totală a documentului minus înălțimea ferestrei însăși (deoarece documentul va derula până când partea de jos a documentului va ajunge în partea de jos a ferestrei).

Vom folosi următorul cod JavaScript pentru a calcula această poziție de defilare.

()) var (var) = (w) () var var = var (= 'scroll', funcția () var perc = Math.max (0, Math.min (1, $ w.scrollTop () / sHeight);); ());

Codul de mai sus stabilește înălțimea ferestrei și înălțimea corpului, iar atunci când utilizatorul scroll, utilizează aceste valori pentru a seta a perc variabilă (scurt pentru procent). De asemenea, folosim Math.min și Math.max pentru a limita valorile în intervalul 0-100.

Cu acest calcul procentual, putem conduce indicatorul de progres.

Indicator de cerc

Primul indicator pe care îl vom crea este un cerc SVG. Vom folosi SVG accident vascular cerebral-dasharray șiaccident vascular cerebral-dashoffset proprietăți pentru a afișa progresul. Mai întâi, să adăugăm indicatorul de progres în document.

Acest marcaj ne dă două cercuri într-un SVG, precum și un div conținând pentru a arăta numărarea noastră procentuală. Trebuie să adăugăm stil și acestor elemente, iar apoi vom explica modul în care aceste cercuri sunt poziționate și animate.

.indicator de progres poziție: fix; top: 30px; drept: 30px; lățime: 100px; înălțime: 100px;  .progres-count position: absolute; top: 0; stânga: 0; lățime: 100%; înălțime: 100%; text-align: centru; linia-înălțime: 100px; culoare: # 0082FF;  svg poziție: absolută;  cerc fill: rgba (255,255,255,0.9);  svg. cerc -imprimat umplere: transparent; mărimea cursei: 40px; accident vascular cerebral: # 0A74DA; accident vascular cerebral: 126; accident vascular cerebral: 126;

Aceste stiluri ne-au determinat să animăm elementul cercului nostru. Progresul nostru ar trebui să fie întotdeauna vizibil, așadar am fixat poziția fixată pe .progres indicator clasă, cu reguli de poziționare și dimensionare. De asemenea, am stabilit că numărul nostru de progrese trebuie să fie centrat atât vertical cât și orizontal în interiorul div.

Cercurile sunt poziționate în centru folosind transformarea elementelor SVG. Începem centrul cercurilor noastre folosind transformarea. Utilizăm aici o tehnică care ne permite să aplicăm o rotație din centrul cercurilor noastre pentru a începe animația din partea de sus a cercului (mai degrabă decât partea dreaptă a cercului). În SVG, transformările sunt aplicate din partea stângă sus a unui element. De aceea trebuie să ne concentrăm cercurile 0, 0, și mutați centrul cercului în centrul SVG traduce (50, 50).

Folosind stroke-dasharray și stroke-dashoffset

Proprietatile accident vascular cerebral-dasharray șiaccident vascular cerebral-dashoffset ne permite să animăm lovitura unui SVG. accident vascular cerebral-dasharray definește piesele vizibile ale unui accident vascular cerebral. accident vascular cerebral-dashoffset mută începutul accidentului. Aceste atribute combinate ne permit să creăm un proces "de tip keyframing".

Actualizați cursorul-dasharray pe Scroll

Apoi, vom adăuga o funcție pentru a actualiza cursa-dasharray de pe defilare, utilizând progresul procentual afișat anterior.

(var = $ ($)); var $ = $ (= $); ); var h = $ ('body'); înălțime (); var sHeight = h - wh; $ w.on ('scroll', function () var perc = Math.max , $ w.scrollTop () / sHeight)); updateProgress (perc);)); actualizare funcțieProgress (perc) var circle_offset = 126 * perc; $ circ.css ("stroke-dashoffset": 126 - circle_offset) ; $ progCount.html (Math.round (perc * 100) + "%"); ());

Decompensația care se potrivește cu cercul nostru se întâmplă să fie de aproximativ 126. Este important de reținut că acest lucru nu va funcționa pentru toate cercurile, deoarece 126 se referă la circumferința unui cerc cu o rază de 20. Pentru a calcula cursa-dashoffset pentru o anumită cerc, mutiply raza de 2PI. În cazul nostru, compensarea exactă ar fi 20 * 2PI = 125,66370614359172.

Variație orizontală a progresului

Pentru următorul exemplu, vom face o bară orizontală simplă fixată în partea de sus a ferestrei. Pentru a realiza acest lucru, vom folosi un indicator de progres gol div.

Notă: am adăugat "-2" pentru a ne permite să includeți acest exemplu în același fișier CSS.

Apoi, vom adăuga stilul nostru pentru acest element.

.progres-indicator-2 poziție: fix; top: 0; stânga: 0; înălțime: 3px; fundal-culoare: # 0A74DA;

În cele din urmă, vom seta lățimea barei de progres pe parcurgere.

var $ prog2 = $ ("progres-indicator-2"); actualizare funcțieProgress (perc) $ prog2.css (lățime: perc * 100 + '%');

Toate împreună, JavaScript-ul nostru final ar trebui să arate astfel:

($) $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ "var" = (w) (); var h = $ ('body'); înălțime (); var sHeight = ) var perc = Math.max (0, Math.min (1, $ w.scrollTop () / sHeight)); actualizareProgress (perc); $ prog = cc) (width: perc * 100 + '%) '); ());

Alte idei pentru barurile de progres

Acest articol este destinat să vă ofere instrumentele și inspirația de a vă crea propriile soluții de evoluție a scroll-ului. Alte idei pentru barele de progres ar putea include folosirea unor termeni descriptivi sau umanizați pentru indicarea progresului însuși, cum ar fi "la jumătatea drumului" sau "doar pentru a începe". Unele implementări (cum ar fi exemplul ia.net afișat anterior) utilizează estimarea timpului de citire al unui articol. Acest lucru ar putea fi estimat folosind un cod similar cu următorul text:

var cuvintePerMin = 300; // bazate pe acest articol: http://www.forbes.com/sites/brettnelson/2012/06/04/do-you-read-fast-enough-to-be-successful/ var wordsArray = $ (". articol - conținut "). var cuvântCount = wordsArray.length; var minCount = Math.round (cuvântCount / wordsPerMin);

Apoi, utilizați minCount împreună cu perc variabilă pe care o actualizăm pe parcurgere pentru a afișa cititorului timpul rămas pentru a citi articolul. Iată o implementare foarte fundamentală a acestui concept.

actualizare funcțieProgress (perc) var minutesCompleted = Math.round (perc * minCount); var rema = minCount - minuteCompletat; dacă (rămase) $ ("indicator de progres") arată () .html (rămase + "minute rămase");  altceva $ ("indicator de progres") hide ();

O singură piesă finală: Dimensiunea ecranului adaptabil

Pentru a ne asigura că indicatorul nostru de progres funcționează așa cum ar trebui, trebuie să ne asigurăm că matematica noastră calculează lucrurile potrivite la momentele potrivite. Pentru ca acest lucru să se întâmple, trebuie să ne asigurăm că noi calculam înălțimea și actualizăm indicatorul de progres atunci când utilizatorul redimensionează fereastra. Iată o adaptare a JavaScript pentru a face acest lucru:

($) $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ ()), var, wh, h, sHeight; funcția setSizes () wh = $ w.height (); h = $ ('body'). (), $ w.on ('scroll', funcția () var perc = Math.max (0, Math.min (1, $ w.scrollTop () / sHeight)), updateProgress (perc); pe ('redimensionare', functie () setSizes (); $ w.trigger ('scroll');); "$ Progro.html (width: perc * 100 + '%'); ()) $ progCount.html (Math.round (perc * 100) ;

Acest cod declară o funcție care stabilește variabilele de care avem nevoie pentru a calcula progresul la orice dimensiune a ecranului și apelurile care funcționează la redimensionare. Noi, de asemenea, re-declanșa scroll pe fereastra redimensiona, astfel încât noastre updateProgress funcția este executată.

Ați atins sfârșitul!

După ce ați pus temelia pentru orice număr de variante, cu ce puteți să veniți? Ce indicatori ai progresului ați observat că funcționează? Ce zici de indicatorii care sunt rău pentru uzabilitate? Împărtășiți-vă experiențele cu noi în comentarii!

Web design

Cum se construiește un șablon de pagină de destinație Pagewiz, gata de vânzare

Cum se construiește un site de ziar cu o rețea