Kop 1

Inleiding

In deze opdracht maak je een lijnanimatie om een rechthoekig element. Dit element is responsive. Een mogelijke uitwerking zie je in de video hiernaast.
Het JavaScript nderzoek het elment en bepaalt de breedte en de hoogte van dit element. Daarmee kan hij dus ook de omtrek uitrekenen.
Het script maakt een SVG element dat precies op de plek van het element komt te liggen. Dit maken van het SVG is best pittig, maar daarna heb je het voordeel dat je de omtrek kunt bewerken.
Vervolgens kan het de lijnomtrek beïnvloeden. De lengte van de streepjes is de dasharray en de dashoffset is de mate waarin er een afstand tot de streepjeslijn genomen wordt. Zie hiervoor https://css-tricks.com/svg-line-animation-works/.

Leerdoelen

Je laat in deze training het volgende zien:

• Een pagina met responsive elementen maken: gebruik display:grid eventueel met enkele mediaquries. (kan ook zonder mediaqueries responsive resultaat geven!!)
• met JS de lengte en breedte van een element bepalen
• elementen aan DOM toevoegen
• SVG-rechthoeken aan DOM toevoegen
• met JS attributen van de rechthoek maken

opdracht

1. Bestudeer de video hiernaast. Deze leert hoe je elementen aan de DOM kunt toevoegen met JS.
2. Maak een document met elementen. Maak deze responsive met CSS grid. Je maakt dus mediaqueries zodat op geschikte moementen overgestapt wordt van 1-koloms, nar 2 koloms naar 3-koloms layout. Dit is niet moeilijk. Als de parent van de elementen display: grid; krijgt, dan kun je voor een 3 koloms layout dus grdi-template-columns: 1fr 1fr 1fr; aan toevoegen.
3. Ook is er er een grid-gap nodig
4. Geef de gemaakte elementen een class-name voor de CSS en het JS.
5. Geef de gemaakt elementen met CSS ook een achtergrodnkleur en padding.
6. Maak een variabele aan in het JS met let XXX = document.querySelectorAll('.classNaam'); (je gebruikt natuurlijk een eigen bedachte class-naam!!)
7. Via de console controleer je of XXX een array van DOM-elementen is.
8. Bestudeer https://stackoverflow.com/questions/12786797/draw-rectangles-dynamically-in-svg hoe het teovoegen van SVG's en rechthoeken van SVG's werkt. Dit is dus een variant van de video hiernaast.
9. Probeer dat (gebruik bijvoorbeeld een for-lus omdat dat voor alle elementen te doen.) zelf en controleer via de inspector of dat lukt.
10. Als de svg met daarbinnen een rect-vorm er staat, dan moet alles nog linksboven op de elementen komen. Zoals je weet, kun je dat doen in de CSS, door de elementen een position:relative; te geven en de svg een position: absolute; en een top: 0 of zelfs negatief en een left: 0;
11. de eigenschappen voor dasharray en dash-offset geeft je in het JS door aan de rect een attribuut met tegeven met de eigenschap style en de waarde waarbij je de CSS als een inline-style opgeeft.
12. Ook in het JS, moet je ervoor zorgen dat een mouse-enter een style-eigenschap aanpast en een mouseleave deze weer terugzet. Het gaat er dan om de dasharray bij een mouseover terug te nemen naar 0. Dan is deomtrek helemaal met een streep van de dash bedekt.
13. Met een transition kun je de beide dash-offsets in elkaar laten overgaan en is de lijnanimatie klaar.

Stap 1: een statsiche SVG plaatsen (00:13:47)

opbouw van het document

Stap 2: SVG's dynamisch plaatsen (00:12:33)

Met JavaScript worden de svg's nu dynamisch geplaatst. Voor het gemak maken we de afmetingen nog statisch.
Omdat het svg's zijn werken we met een variabele svgns= 'http://www.w3.org/2000/svg'. Deze gebruiken we document.createElementNS(); Zie: https://stackoverflow.com/questions/12786797/draw-rectangles-dynamically-in-svg

Stap 3: SVG's dynamisch plaatsen (00:12:06)

De afmetingen van de svg en de rechthoek moeten gelijk worden aan de sectie, waar hij inzit. Het script gaat deze afmetingen bepalen.
Dan kan ook de omtrek worden vastgesteld, die voor de stroke-dashoffset en de stroke-dasharray gebruikt kunnen worden.
.offsetWidth en .offsetHeight zijn hier de juiste methoden voor. Bovendien moet voor het mousover- en de mouseout-events het stijlattribuut worden aangepast.

stap 4: bij vensteraanpassingen de lijnen opnieuw opbouwen (00:08:03)

Bij een wijziging van de viewport blijven de SVG's gelijk. Omdat de inhoud verandert, is dit ongewenst.
O dit op te lossen worden de statements om de sVG's te maken in een functie geplaatst.
Daarnaast wordt een functie gemaakt die alle gemaakte SVG's in een array plaatst om die vervolgens met een while-lus te verwijderen.
Als een element uit de array is geselecteerd kun je met de method .parentNode de parent selecteren, en vervolgens het child met removeChild(naamElement) verwijderen.
Op het resize-event van het window-object kun je dan eerst de SVG's verwijderen en daarna opnieuw toevoegen. Dan kloppen de maten weer met de inhoud.

Inleveren

• Voeg validatie linkjes toe in een footer van jouw training. Haal ze bijvoorbeeld bij: https://github.com/Theo-denBlanken/validatie-W3C
• Na afloop plaats je deze training online in je bewijzenmap.
• Valideer jouw pagina's.
• Plaats jouw repository op GitHub. In de README.md van deze repository is een link naar de live-versie van deze training
• Plaats de GitHub-link in ELO Magister bij opdracht FRO randanimatie.