Ontwerpen - KaanKalmi/fix-the-flow-ui-events GitHub Wiki

Aanpak

  • Maak eerst een snelle schets van de interactie en feedback/forward die je de gebruiker wilt geven;
  • Maak een breakdown om te onderzoeken welke JS en CSS je nodig hebt.

IMG_4885

Beschrijving interactie

  • Bij schets 1 heb ik een button gemaakt die "zwaait" zodra je erop klikt, denk hierbij aan een element dat je gebruikt om iemand te verwelkomen etc.

  • Bij schets 2 heb ik een element gemaakt die weg fade als je er op klikt, dit zou je kunnen gebruiken voor spelletjes of iets.

  • Bij schets 3 heb ik een element gemaakt die van kleur verandert

Uitleg over de code

De code werkt vrij simpel, het is gewoon een animatie gemaakt met keyframes en de JS is nog simpeler,

eerst maak ik mijn variabele aan, daarna selecteer ik de element die ik interactief wil maken, vervolgens zet ik event listeners erin en daarna maak ik de functie aan die de class toggled voor het element.

Bij schets 3 is de JS wel wat lastiger omdat ik het een keydown event heb gemaakt.

Hierbij nam ik de volgende stappen door:

  • event listener voor de hele window
  • bij keydown voer functie(event) uit
  • als event.key 1 is voeg voor alle elementen class '1' toe
  • als event.key 2 is haal voor alle elementen class '1' weg