Ben's Hobbyhoekje -- Tekenen door scrollen

Tekenen door scrollen

Als je deze pagina naar beneden scrollt, verschijnt er een driehoek. Als je terug scrollt verdwijnt de driehoek weer. Op deze pagina wordt uitgelegd hoe je zoiets maakt.

Er worden twee items besproken:
1. De werking van het script.
2. Toepassen in je eigen site.
Dit is een bewerking van een script dat ik aantrof op w3schools.com. Voor deze site is het JavaScript verplaatst naar de <head>.
Het is eigenlijk een variant op de verticale scroll-indicators die op deze site te vinden zijn: klik HIER of HIER.
De code kun je downloaden om zelf te gebruiken.
De werking van het script
De code bestaat uit HTML, CSS en JavaScript.
HTML
De HTML bestaat uit één enkele <svg>-tag. Voor de opmaak en de communicatie met JavaScript heeft die id="mySVG".
De <svg> bevat één <path>-tag, waarmee de driehoek wordt getekend. Voor de communicatie met JavaScript heeft die id="triangle".
De overige attributen van <path> worden beschreven in het item Over de <path>-tag in SVG.
CSS
De CSS van het voorbeeld maakt de <svg>-tag met id="mySVG" op. Er wordt hier een id gebruikt in plaats van een class, omdat dit ook gebruikt wordt om te communiceren met JavaScript.
De position is fixed. Daardoor staat de driehoek op een vaste plaats in het document.
De hoogte en de breedte zijn zo gekozen dat de driehoek er ruim in past.
De linker marge staat op -50px. Daardoor wordt de driehoek 50 px naar links geschoven.
De driehoek is onzichtbaar gemaakt met display:none. Zodra dat pagina is geladen wordt de driehoek via Javascript zichtbaar gemaakt. Dit is nodig omdat het JavaScript de de <head> van het document staat.
JavaScript
Alle JavaScript staat in de <head>-sectie van et document. Er is één function, init(), die wordt gestart via window.addEventListener(), zodra de pagina is geladen.
Als eerste wordt een verwijzing naar de <svg>-tag met id="trangle" opgeslagen in de variabele trangle.
SVG heeft een eigen DOM, met eigen JavaScript-functions om de figuur met JavaScript te wijzigen. Voor deit voorbeeld is de lengte van de omtrek van de driehoek interessant. Die wordt opgeslagen in length, via getTotalLength().
De start positie van de tekening wordt ingesteld op het 'einde' van de driehoek. Dit is de top. (De driehoek wordt getekend als één doorlopende lijn, beginnend en eindigend in de top, tegen de klok in).
Hiervoor wordt de eigenschap style.strokeDasharray ingesteld op length.
Vervolgens wordt de driehoek verborgen door de het beginpunt van de driehoek gelijk te maken aan het eindpunt. Dat gaat door style.strokeDasharray in te stellen op length.
Nu wordt er een eventlistener gemaakt voor het scrollen. Als er wordt gescrolled wordt de function tekenOfGumUit() aangeroepen.
Tenslotte wordt mySVG zichtbaar gemaakt door display in te stellen op block.
De function tekenOfGumUit() kijkt hoever er is gescrolled is, in vergelijking tot de hoogte van het document. Dit wordt berekend als een fractie van de hoogte en bewaard in scrollfraction. Het is een getal: 0 ≤ scrollfraction ≤ 1.
De variabele draw wordt het product length * scrollfraction bewaard. Dit is de lengte van de omtrek van de driehoek die daadwerkelijk wordt getekend.
Tenslotte wordt style.strokeDashoffset ingesteld op length - draw;, zodat het begin en eindpunt van de tekening goed staan ingesteld.
Toepassen in eigen site
Download de .zip-file en pak hem uit. Zet de code in de eigen document, zoals hieronder is aangegeven. Je hebt nu een werkend voorbeeld.
Wijzig de attributen van de <svg>-tag: kleur(stroke), lijndikte (stroke-width) en de vorm van de driehoek (d). Het is mogelijk extra punten toe te voegen of te verwijderen, Er moeten echter minimaal drie punten zijn.
fill moet je op "none" laten staan.
Wijzig de eigenschappen van #mySVG in de CSS: top, hoogte en breedte en de linker marge. Laat position en display onveranderd.
Het JavaScript hoeft niet te worden aangepast

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>).

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
#mySVG {
position: fixed;
top: 15%;
width: 400px;
height: 210px;
margin-left:-50px;
display:none;
}
</style>

<script>
function init() {
// Haal het id van het SVG <path> element op en bepaal de lengte
// van <path>
var triangle = document.getElementById("triangle");
var length = triangle.getTotalLength();

// De start positie van de tekening
triangle.style.strokeDasharray = length;

// Verberg de driehoek door dash te offsetten. Verwijder deze regel
// als je de driehoek wilt zien voordat er wordt gescrolled
triangle.style.strokeDashoffset = length;

// Bepaal het scroll percentage (o.b.v. cross-browser properties),
// en offset de dash met hetzelfde percentage.
// De tekening wordt nu zichtbaar of wordt verborgen
window.addEventListener("scroll", tekenOfGumUit);

// Maak de driehoek zichtbaar
document.getElementById('mySVG').style.display = "block";

function tekenOfGumUit() {
var scrollfraction = (document.body.scrollTop
+ document.documentElement.scrollTop)
/ (document.documentElement.scrollHeight
- document.documentElement.clientHeight);

var draw = length * scrollfraction;

// teken het relevante deel van de driehoek
triangle.style.strokeDashoffset = length - draw;
}
}

// Voer init() uit zodra de pagina is geladen
window.addEventListener("load", init);
</script>

(Zet dit in de <BODY>, bij voorkeur helemaal bovenaan).

<svg id="mySVG">
<path fill="none" stroke="red" stroke-width="3" id="triangle"
d="M150 0 L75 200 L225 200 Z" />
Sorry, uw browser ondersteunt geen inline SVG.
</svg>

Downloaden:

Druk op de knop: File: voorb678.zip, 986 bytes.