Kop 1

Voor een gebruiker van een mobiel is het prettig als hij bij een tap op een element kan vaststellen dat deze is geraakt.
Een ripple is daarvoor een goede oplossing en wordt daarom bij Material design vaak toegepast. Het is op te vatten als een rimpeling die door de tap wordt veroorzaakt.

Deze reeks is een vervolg op een instructie over een werkwijze om een switch te maken.
Een switch is een andere presentatie van een checkbox.
De instructie van ruim 19 minuten staat hiernaast. Deze wordt helemaal in CSS uitgevoerd.

Ripple effect met CSS en JS

Leerdoelen bij het maken van de ripple

• eventListeners in JS;
• element creëren met JS;
• overflow: hidden; in CSS
• animatie in CSS;
• positie bepalen van een click in JS.
• absoluut en relatief positioneren in CSS

Ripple effect met CSS en JS 0: het resultaat (00:01:17)

Het resultaat van deze tutorialreeks. Bij een klik op een div maar ook op een label, ontstaat er een effect dat het Material Design ondersteunt. De gebruiker op een mobiel kan zien dat er een tap (klik) is uitgevoerd.

Ripple effect met CSS en JS 1: handler voor klik-event maken (00:06:25)

Het idee achter het rimpel-effect is dat een klik op een element leidt tot een nieuw element dat groeit.
Hier maken we een stukje JavaScript dat een event registreert.
Dit gaat met een .addEventListener() method.
We voeren het event door naar de console om te verkennen welke eigenschappen deze heeft. Bekijk al die eigenschappen, we gaan met pageX en pageY aan de slag.

Ripple effect met CSS en JS 2: element bij de klik plaatsen (00:07:50)

De klik roept een functie op, en deze heeft het event e als parameter.
Het maakt met document.createElement() een div-element.
We geven deze een class mee. zodat we hem kunnen stijlen.
We maken hem eerst voor de test erg klein en rood, zodat hij goed zichtbaar is.
Het script kiest uit de event-eigenschappen de pageX en pageY.
Om deze vervolgens te verminderen met de positie van het element zelf. Daarvoor gebruiken we dan this.offsetLeft en this.offsetTop.
Met JS stijlen we dan de left en de top waarden.
Daarvoor is dan wel in de CSS het rimpel-leemt een position:absolute; gegeven.
Daardoor kan hij overal terechtkomen en verstoort het niet de positie van de andere elementen in het geklikte object.
Het geklikte object moet daarvoor wel een position: relative; hebben omdat anders de positie van het toegevoegde element ten opzichte van het document is.
Het script werkt nu bij de div maar niet in het label. Dat wordt in de volgende video opgelost.

Ripple effect met CSS en JS 3: script ook voor labels laten werken (00:04:21)

De klik werkt niet bij het label. Daar wordt het event verwerkt om de switch om te zetten of beter gezegd de check van de checkbox te veranderen.
Het script wordt nu zo aangepast, dat in de eventListener een aangepaste functie komt.
Als eerste wordt de default verwerking van de klik in de browser verhinderd met e.preventDefault();
Alle andere statements die we in de functie hadden staan worden nu daarachter uitgevoerd.
Dit werkt in zoverre dat het element nu ook aan het label wordt toegevoegd, maar nu wordt de switch niet overgehaald.
Daarvoor voegen we een paar regels toe. We maken een variabele van de checkbox, en we geven de checked-eigenschap de waarde die hij niet heeft.

Ripple effect met CSS en JS 4: de ripple stijlen en animeren (00:07:40)

De rimpel wordt nu juist geplaatst bij een klik.
We maken hem eerst groter en zien dat hij buiten het geklikte element komt. Om dit te voorkomen krijgt hij dan een overflow: hidden.
Een ronde rimpel krijg je door een border-radius te geven. De animatie gaat het element tot 1200 bij 1200 px vergroten, dus de helft daarvan is nodig voor de straal.
Verkleinen kan me transform: scale().
Om te zien wat we doen is die niet direct 0 maar wel erg klein.
Bij klikt blijkt dat de linkerbovenhoek van het element bij de geklikte plek komt. Omdat deze nu 100 bij 100px is, moet die gecorrigeerd worden in het script zodat het midden daar komt. We trekken in dat script dus 50 af van de berekende positie.
Bij het plaatsen van de 'rimpel' geven we ook een animatie mee door er een class aan toe te voegen.
in de class zit dan een animatie waarbij zowel de schaalfactor als de transparantie anderen bij 100% naar 12 respectievelijk 0.
Tot slot geven de de rimpel een transparant grijze achtergrond mee.

Ripple effect met CSS en JS 5: optimalisatie (00:02:43)

Voor een betere browserondersteuning voegen we prefixes toe.
Om de browsers te versnellen, sturen we geen gebroken getallen aan voor de positie van de rimpel.
De berekende waarden worden met parseInt() tot integer teruggebracht.

Inleveren

• Na afloop plaats je deze training online in je bewijzenmap;
• Valideer jouw pagina's op Markup Validation Service van W3C.
• De validatie icoontjes staan al in de footer. Code vind je bij https://github.com/Theo-denBlanken/validatie-W3C;
• Plaats jouw code op in een aparte reposetry op GitHub en plaats jouw uitwerking online;
• Maak in jouw GitHub-repo een README.md met daarin temnminste een link naar jouw online uitwerking.
• Plaats de GitHub-link in ELO Magister bij de FRO-opdracht modaal venster