Maak een subtiele voortgangsindicator – Webdesigner

Home/News/Maak een subtiele voortgangsindicator – Webdesigner

[ad_1]

Door: Jorrit Tinholt

In deze workshop laten we zien hoe je een balk maakt waaraan je kunt aflezen hoever je bent gevorderd in het artikel dat je aan het lezen bent, zoals te zien op De Correspondent. Op die manier weet je tijdens het lezen altijd hoe ver je bent en hoe lang het artikel nog is.

 

TECHNIEK

1. HTML structuur

Laten we beginnen met de basisopzet voor een HTML-pagina. Sla dit bestand op als index.html.

<!DOCTYPE html>
<head>
<title>Voortgangsindicator</title>
<link rel=“stylesheet” type=“text/css” src=“style.css”/>
</head>
<body>
<script src=“script.js”></script>
</body>
</html>

Zoals je ziet, laden we een stylesheet (style.css) en een JavaScript-bestand (index.js). Deze bestanden zullen we straks aanmaken.

2. Een voorbeeldartikel

Omdat we een voortgangsindicator bouwen, hebben we een tekst nodig. Dat kan je eigen tekst zijn of een voorbeeldtekst van de Lorem Ipsum-generator op http://lipsum.com. Het is belangrijk dat je tekst lang genoeg is om voor een flinke scrolbar te zorgen. Op die manier is het effect van de voortgangsindicator straks het duidelijkst zichtbaar. Plak deze tekst als volgt in de <body> van je HTMLpagina, net boven de <script> tag.

<article class=“article js-article”>
<h1>Lorem ipsum</h1>
(… hier je Lorem Ipsum tekst …)
</article>

Zoals je ziet hebben we de <article> tag twee classes gegeven: article en js-article. Dit is een stijl die De Correspondent aanhoudt. De class zonder “js-” is voor de weergave (CSS), de class met “js-” wordt gebruikt door het JavaScript. Zo voorkomen we dat er bij het wijzigen van een classname onbedoeld bugs ontstaan.

3. De voortgangsindicator

Plaats onderstaand stukje HTML in de <body> van je pagina. Aangezien we dit straks met CSS fixed gaan positioneren, maakt het niet zoveel uit waar in de <body> je de HTML neerzet.

<div class=“progress-container”>
<div class=“progress-bar js-progress-bar”></div>
</div>

4. De styling van de voortgangsindicator

Maak een nieuw bestand en noem dit style.css. We gebruiken dit bestand om de voortgangsindicator te stylen. Dit is natuurlijk maar een voorbeeld. Het is verder aan jou om de indicator naar je eigen smaak op te maken.

.progresscontainer {
position
: fixed;
top
: 0;
left
: 50%;

width: 600px;
padding
: 10px;

backgroundcolor: #eee;
webkittransform: translateX(-50%);
transform
: translateX(-50%);
}

.progressbar {
width
: 0%;
height
: 10px;

backgroundcolor: #df5b57;

webkittransition: width .25s ease;
transition
: width .25s ease;
}

Deze CSS zorgt ervoor dat je voortgangsindicator gecentreerd bovenaan je pagina staat. Ook als je scrolt, blijft de indicator netjes bovenaan de pagina hangen. Voor het centreren gebruiken we een transform in combinatie met left: 50%. De -webkitprefix is nodig om dit in verschillende browsers te laten werken. Er zijn andere manieren om dit te doen, maar dit is een erg handige.

5. Extra styling voor het artikel

Om het effect van de indicator goed te kunnen aantonen, voegen we nog een extra CSS-class toe aan het bestand style.css:

.article {
margin
top: 80vh;
margin
bottom: 80vh;
}

Met deze regels voegen we wat ruimte boven en onder het artikel toe. Dit kan meer of minder zijn, afhankelijk van jouw pagina-layout.

6. Het JavaScript

Nu de basis-HTML en -CSS staan, is JavaScript de volgende stap. Maak een nieuw bestand, noem dat index.js en begin met de volgende regels om een referentie naar het artikel en de indicator te maken:

var article = document.querySelector(‘.js-article’);
var progressbar = document.querySelector(‘.js-progress-bar’);

7. De voortgang berekenen

Aan de hand van de hoogte van je scherm, de scrolpositie en de hoogte van het artikel-element kunnen we berekenen hoe ver je met lezen bent. Voeg daarvoor onderstaande functies toe aan je JavaScript-bestand:

var getHeight = function () {
return article.offsetHeight;
};

var getValue = function () {
return window.innerHeight (article.offsetTop window.scrollY);
};

var getPercentage = function () {
var percentage = (getValue() / getHeight()) * 100;
return Math.max(0, Math.min(100, percentage));
};

8. De breedte updaten tijdens het scrollen

Iedere keer dat de lezer scrolt, willen we de voortgangsindicator een beetje langer of korter maken. Daarom hebben we een functie nodig die op ieder scroll-event wordt aangeroepen. Voeg het volgende toe aan het JavaScript-bestand:

var onScroll = function () {
progressbar
.style.width = getPercentage() + ‘%’;
};

window.addEventListener(‘scroll’, onScroll);

9. Extra

Een voortgangsindicator is natuurlijk nooit 100% accuraat. We weten immers niet waar de ogen van de lezer exact op gericht zijn. In dit voorbeeld gaan we ervan uit dat de tekst gelezen is zodra deze op het scherm zichtbaar is. Denk jij dat het logischer is om de tekst als gelezen te beschouwen wanneer deze het midden van het scherm gepasseerd is? Verander dan de functie getValue() in het volgende:

var getValue = function () {
return (window.innerHeight * 0.5) (article.offsetTop window.scrollY);
};

 

Je vindt deze code ook op codepen

 

 

 

 

 

[ad_2]

Source link

2017-03-17T21:25:17+00:00 17 maart, 2017|Tags: , , , , |0 Reacties

Geef een reactie