Vandaag zullen we kijken naar enkele technieken die we kunnen gebruiken om de voortgang van het scrollen te tonen voor gebruikers die een pagina lezen. Deze techniek wordt op een groeiend aantal sites gebruikt, en met goede reden; het biedt een contextueel begrip van de investering die nodig is om een bepaalde pagina te consumeren. Terwijl de gebruiker scrolt, krijgt deze een indruk van de voortgang in verschillende indelingen.
Zoals te zien op ia.net
Vandaag bespreken we twee specifieke technieken die u kunt gebruiken om de voortgang van het bladeren te laten zien, en u een toolset over te laten om uw eigen te maken. Laten we beginnen!
Het document instellen
Eerst zullen we een nepdocument opstellen dat als onze postpagina zal fungeren. We zullen gebruiken normalize.css en jQuery, evenals een Google-lettertype. Uw lege HTML-bestand zou er als volgt uit moeten zien:
Voortgangsindicator Animatie
Vervolgens voegen we onze valse berichtinhoud toe:
Hoe moeten we vooruitgang boeken tijdens het scrollen van een bericht?
Lorem ipsum dolor sit amet, consectetur adipiserende elit.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas sempre. Aenean ultrences mi vitae est. Mauris placerat eleifend leo. Quisque zit op 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 non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
Dit geeft ons genoeg inhoud om ons scrolgedrag te testen.
Basic Styling
We gaan een aantal basisstijlen gebruiken om onze post een beetje aantrekkelijker te maken.
Om onze schuifpositie te berekenen, moeten we conceptueel begrijpen wat we volgen. Omdat JavaScript alleen de bovenste schuifwaarde kan volgen, moeten we onze schuifwaarde van 0 (bovenaan, niet geschoven) tot de uiteindelijke schuifwaarde bijhouden. Die laatste scrollwaarde is gelijk aan de totale documentlengte minus de hoogte van het venster zelf (omdat het document zal scrollen totdat de onderkant van het document de onderkant van het venster bereikt).
We zullen het volgende JavaScript gebruiken om deze schuifpositie te berekenen.
(functie () var $ w = $ (venster); var wh = $ w.height (); var h = $ ('body'). height (); var sHeight = h - wh; $ w.on ( 'scroll', function () var perc = Math.max (0, Math.min (1, $ w.scrollTop () / sHeight));); ());
De bovenstaande code stelt de vensterhoogte en de lichaamslengte in, en wanneer de gebruiker scrolt, worden die waarden gebruikt om een in te stellen perc variabele (kort voor percentage). We gebruiken ook Math.min en Math.max om de waarden te beperken tot het bereik van 0-100.
Met deze procentuele berekening kunnen we de voortgangsindicator rijden.
Cirkelindicator
De eerste indicator die we zullen maken is een SVG-cirkel. We gebruiken de SVG stroke-dasharray enstroke-dashoffset eigenschappen om de voortgang te tonen. Laten we eerst de voortgangsindicator toevoegen aan het document.
Deze markup geeft ons twee cirkels in een SVG, evenals een bevattende div om onze percentagetelling te tonen. We moeten ook stijl toevoegen aan deze elementen, en dan zullen we uitleggen hoe deze cirkels zijn gepositioneerd en geanimeerd.
Deze stijlen stellen ons in om ons cirkelelement te animeren. Onze voortgang moet altijd zichtbaar zijn, dus we stellen onze positie vast op de .vooruitgang-indicator klasse, met positionerings- en formaatregels. We stellen ook dat onze voortgangstelling zowel verticaal als horizontaal gecentreerd is binnen deze div.
De cirkels worden in het midden geplaatst met behulp van transformatie op de SVG-elementen zelf. We beginnen het centrum van onze cirkels met behulp van transformatie. We gebruiken hier een techniek waarmee we een rotatie vanuit het midden van onze cirkels kunnen toepassen om de animatie bovenaan de cirkel te starten (in plaats van de rechterkant van de cirkel). In SVG worden transformaties toegepast vanaf de linkerbovenhoek van een element. Dit is waarom we onze kringen moeten centreren 0, 0, en verplaats het midden van de cirkel naar het midden van de SVG zelf met vertalen (50, 50).
Met behulp van stroke-dasharray en stroke-dashoffset
De eigenschappen stroke-dasharray enstroke-dashoffset sta ons toe om de slag van een SVG te animeren. stroke-dasharray definieert de zichtbare delen van een streek. stroke-dashoffset verplaatst het begin van de slag. Met deze gecombineerde kenmerken kunnen we een 'keyframing'-proces voor een stroke maken.
Bijwerken van lijn-dashray op Scroll
Vervolgens voegen we een functie toe om de stroke-dasharray bij het scrollen bij te werken, met behulp van ons eerder weergegeven percentage voortgang.
(functie () var $ w = $ (venster); var $ circ = $ ('.animated-circle'); var $ progCount = $ ('. progress-count'); var wh = $ w.height (var. ); var h = $ ('body'). height (); var sHeight = h - wh; $ w.on ('scroll', function () var perc = Math.max (0, Math.min (1) , $ w.scrollTop () / sHeight)); updateProgress (perc);); functie updateProgress (perc) var circle_offset = 126 * perc; $ circ.css ("stroke-dashoffset": 126 - circle_offset) ; $ progCount.html (Math.round (perc * 100) + "%"); ());
De offset die overeenkomt met onze cirkel is ongeveer 126. Het is belangrijk om op te merken dat dit niet voor alle cirkels werkt, omdat 126 ongeveer de omtrek van een cirkel met een straal van 20 is. Om de stroke-dashoffset voor een gegeven te berekenen cirkel, mutiply de straal door 2PI. In ons geval zou de exacte offset zijn 20 * 2PI = 125.66370614359172.
Horizontale voortgangsvariatie
Voor ons volgende voorbeeld maken we een eenvoudige horizontale balk boven aan het venster. Om dit te bereiken, gebruiken we een lege voortgangsindicator div.
Notitie: we hebben de "-2" toegevoegd om ons toe te staan dit voorbeeld in hetzelfde CSS-bestand op te nemen.
Vervolgens voegen we onze styling toe voor dit element.
Ten slotte zullen we de breedte van de voortgangsbalk bij scrollen instellen.
var $ prog2 = $ ('. voortgangsindicator-2'); functie updateProgress (perc) $ prog2.css (width: perc * 100 + '%');
Alles bij elkaar zou ons laatste JavaScript er zo uit moeten zien:
(functie () var $ w = $ (venster); var $ circ = $ ('.animated-circle'); var $ progCount = $ ('. progress-count'); var $ prog2 = $ ('. progress-indicator-2 '); var wh = $ w.height (); var h = $ (' body '). height (); var sHeight = h - wh; $ w.on (' scroll ', function ( ) var perc = Math.max (0, Math.min (1, $ w.scrollTop () / sHeight)); updateProgress (perc);); function updateProgress (perc) var circle_offset = 126 * perc; $ circ.css ("stroke-dashoffset": 126 - circle_offset); $ progCount.html (Math.round (perc * 100) + "%"); $ prog2.css (width: perc * 100 + '% '); ());
Andere ideeën voor voortgangsbars
Dit artikel is bedoeld om je de tools en inspiratie te geven om je eigen scroll-voortgangsoplossingen te ontwerpen. Andere ideeën voor voortgangsbalken kunnen het gebruik van meer beschrijvende of gehumaniseerde termen voor de voortgangsindicatie zelf omvatten, zoals 'halverwege' of 'net beginnen'. Sommige implementaties (zoals het eerder getoonde voorbeeld van ia.net) maken gebruik van een schatting van de leestijd van een artikel. Dit kan worden geschat met behulp van een code die lijkt op het volgende:
var wordsPerMin = 300; // op basis van dit artikel: http://www.forbes.com/sites/brettnelson/2012/06/04/do-you-read-fast-enough-to-be-successful/ var wordsArray = $ (". artikel-inhoud "). text (). split (" "); var wordCount = wordsArray.length; var minCount = Math.round (wordCount / wordsPerMin);
Je zou dan de minCount in combinatie met de perc variabele die we bijschuiven om de lezer de resterende tijd te laten zien om het artikel te lezen. Hier is een zeer eenvoudige implementatie van dit concept.
functie updateProgress (perc) var minutesCompleted = Math.round (perc * minCount); var overig = minCount - minutesCompleted; als (resterend) $ (". voortgangsindicator"). show (). html (resterende + "resterende minuten"); else $ (". voortgangsindicator"). hide ();
One Final Piece: Adaptive Screen Sizing
Om ervoor te zorgen dat onze voortgangsindicator werkt zoals het hoort, moeten we ervoor zorgen dat onze wiskunde de juiste dingen op het juiste moment berekent. Om dat te laten gebeuren, moeten we ervoor zorgen dat we de hoogte opnieuw berekenen en de voortgangsindicator bijwerken wanneer de gebruiker het formaat van het venster wijzigt. Hier is een aanpassing van het JavaScript om dat te laten gebeuren:
(functie () var $ w = $ (venster); var $ circ = $ ('.animated-circle'); var $ progCount = $ ('. progress-count'); var $ prog2 = $ ('. progress-indicator-2 '); var wh, h, sHeight; functie setSizes () wh = $ w.height (); h = $ (' body '). height (); sHeight = h - wh; setSizes (); $ w.on ('scroll', function () var perc = Math.max (0, Math.min (1, $ w.scrollTop () / sHeight)); updateProgress (perc);). on ('resize', function () setSizes (); $ w.trigger ('scroll');); functie updateProgress (perc) var circle_offset = 126 * perc; $ circ.css ("stroke-dashoffset ": 126 - circle_offset); $ progCount.html (Math.round (perc * 100) +"% "); $ prog2.css (width: perc * 100 + '%'); ()) ;
Deze code declareert een functie die de variabelen instelt die we nodig hebben om de voortgang op elk schermformaat te berekenen, en oproepen die functioneren bij het wijzigen van de grootte. We schakelen ook opnieuw scrollen in vensterformaat in, zodat onze UpdateProgress functie wordt uitgevoerd.
Je hebt het einde bereikt!
Nadat je de basis hebt gelegd voor een onbeperkt aantal varianten, wat kun je verzinnen? Welke voortgangsindicatoren heb je gezien? Hoe zit het met indicatoren die slecht zijn voor bruikbaarheid? Deel uw ervaringen met ons in de comments!
Accentsconagua
Share
Zoals te zien op ia.net
