Voortgangsindicator IX: Snake in de tekst II
Hieronder zie je een snake. Dat is een voortgangsindicator die je als een slang voorbij ziet kruipen. Het bijzondere is dat deze snake kort begint en in het voorbijgaan langer wordt. Daarna schiet de balk terug. In de volgende "passage" begint de snake lang en wordt in het voorbijgaan korter. De lengte is dus niet constant.
- Er worden twee items besproken:
- De werking van het script.
- Toepassen in je eigen site.
- Inspiratie voor dit item is ontstaan door de snake die je ziet bij het opstarten van een Samsung Tablet (2019). Voor deze site heb ik iets gebouwd wat er een beetje op lijkt.
- De code bestaat uit HTML, CSS (in de file styles.css) en JavaScript (in de file script.js).
- De werking van het script
- Het effect wordt gemaakt met twee geneste <div>-tags. De buitenste is de (blauwe) rand, de binnenste is het (steenrode) bewegende deel.
- Voor de positionering en de opmaak wordt CSS ingezet. De beweging wordt gemaakt met JavaScript.
- In het voorbeeld wordt de beweging gestart met window.onload. De beweging gaat door tot de pagina wordt verlaten.
- HTML
- De HTML bestaat uit twee geneste <div>-tags, die in de code worden gezet op de plaats waar de snake in het
document moet verschijnen.
- De buitenste <div>id="snakeInTekst2". De breedte (width) wordt ingesteld met een inline-style, om het voor JavaScript mogelijk te maken de breedte van deze div op te halen.
- De binnenste <div>-tag heeft id="snake". De positie (left) en de breedte (width) worden ingesteld met een inline-style, om het voor JavaScript mogelijk te maken deze eigenschappen te wijzigen.
- Deze twee <div>-tags mogen geen content bevatten.
- CSS
- De CSS van snakeInTekst2 dient alleen voor de opmaak en de positionering. Er worden geen animaties mee gemaakt, dat wordt gedaan door JavaScript.
- De breedte is 200px, ingesteld met een inline-style ivm communicatie met JavaScript.
- De position is relative; de hoogte is 15px. De binnenmarge is 3px. Er is box-sizing:border-box gebruikt, om de rand binnen de hoogte en de breedte te houden.
- snakeInTekst2 wordt in het midden van de regel gezet met margin:10px auto;.
- De rand is 2px breed, heeft de kleur navy en heeft een afrondingsstraal aan de hoekpunten van 5px.
- overflow staat op hidden. Delen van de snake zelf die buiten de randen van snakeInTekst2 komen zijn
daardoor niet zichtbaar.
- De CSS van snake dient alleen voor de opmaak. De positionering en de breedte worden geanimeerd met JavaScript.
- De position is relative; de hoogte is 5px, met een afrondingsstraal aan de hoekpunten van 2px. De kleur van de snake is maroon, ingesteld met behulp van background-color. De buitenmarge staat op 0.
- Om de beweging vloeiend te laten verlopen is transition:all 0.2s linear; toegevoegd.
- JavaScript
- Als de pagina is geladen, wordt, via window.onload, de function initSnake() gestart.
- initSnake() zet eerst een verwijzing naar #snake in de variabele snakeID, en vult vervolgens de variabele fieldWidth met de breedte van #snakeInTekst2.
- Daarna wordt de waarde van fieldBound bepaald. Dit is de breedte van het deel van #snakeInTekst2 waar de snake niet groeit of krimpt. fieldBound = fieldWidth / fieldFactor, waarbij (in het voorbeeld) fieldFactor = 5.
- Tenslotte wordt via setInterval de function stappen() elke stapTijd uitgevoerd. In het voorbeeld
is stapTijd gelijk aan 200 ms.
- De function stappen() bepaalt eerst waar de linkerkant van de snake zich bevindt binnen snakeInTekst2. Dat wordt bewaard in ll.
- Als ll kleiner is dan 1.1 * fieldWidth, wordt gekeken of ll zich binnen het gebied bevindt waar de
snake groeit of krimpt. Als dat zo is wordt de snake verlengd of verkort met stapWidth = stapLeft / 2 (zie verder).
De variabele groei bepaalt of de snake langer wordt (groei = 1) of korter (groei = -1). - Als ll groter is dan 1.1 * fieldWidth, wordt de snake verplaatst naar ll = -2.2 * de lengte van de snake. De variabele groei krijgt de waarde -groei, waardoor groeien wordt omgezet in krimpen, of omgekeerd.
- Tenslotte wordt de snake naar rechts verplaatst over een afstand stapLeft. In het voorbeeld is dat 10 px.
- De function stappen() wordt met setTimeout elke stapTijd (= 200 ms) uitgevoerd.
- Toepassen in je eigen site
- Download de .zip-file en pak hem uit. Zet de code in je document zoals hieronder is aangegeven. Je hebt nu een werkend voorbeeld.
- Verwijder de regel window.onload uit de file script.js. In je eigen toepassing start je initSnake() bijvoorbeeld bij het starten van een langdurige berekening. De snake stop je met de JavaScript-opdracht clearInterval(stapInterval).
- Wijzig de breedte en/of de hoogte van #snakeInTekst2. Verander zonodig ook de hoogte en/of de (begin-) breedte van de snake.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
(Zet dit in de <BODY> op de plaats waar de snake moet verschijnen).
<div id="snakeInTekst2" style="width:200px">
<div id="snake" style="left:0; width:20px"></div>
</div> <!-- snakeInTekst2 -->
Downloaden:
Druk op de knop:
File: voorb736.zip, 1273 bytes.
