- Dit is een goede resource om een microinteractie te maken met Javascript: Hey designers, if you only know one thing about JavaScript, this is what I would recommend
- Gebruik de querySelector om een element in je html te selecteren
- Koppel een evenListener aan het element om een mouse-event te detecteren
- Gebruik het Classlist object om een css class aan een element toe te voegen of weg te halen.
Voor wat complexere micro-interacties waar verschillende states elkaar moeten opvolgen kun je aan het eind van een transition of animation weer iets laten gebeuren. Gebruik hiervoor in Javascript de:
-
eventlistener: transitionend
-
eventlistener: animationend
-
Dit is een goede uitleg van Drag & Drop. Handig voor Use case 3.
-
Met QuerySelectAll kun je gebruiken om meerdere elementen te selecteren. Handig voor de 4e use case.
- Bekijk hier de lijst User Interface Events die je in javascript kunt gebruiken.
- Als je iets wil doen met scrollen, dan kun je het event 'scroll' gebruiken. Misschien kun je ook iets doen met de Intersection observer
- Als een onderdeel van je pagina in beeld moet verschijnen na een click, dan kun je iets doen met scrollIntoView.
-
Met behulp van XMLHttpRequest of Fetch kan een JSON file worden geladen. Daarna kun je de HTML elementen aanmaken, de juiste content koppelen en aan de DOM toevoegen.
-
Hier staat een tutorial voor het laden van JSON data en het aanmaken van HTMl elementen.
-
Bij het laden van externe data kan de server verschillende HTTP response status codes doorgeven, die kun je gebruiken om feedback te tonen.