Kop 1

tagline

Inleiding

In deze opdracht werk je met CSS-transitions.
De animatie wordt in CSS afgehandeld en ontstaat doordat er een class van een element wordt veranderd.
Deze verandering van class-naam wordt door een click-event in JS aangeroepen.
De toegevoegde class-naam is volgens de BEM naamconventie met een modifier.
De transition heeft een snelheidseffect welke met cubic-Bezier kan worden aangepast: http://cubic-bezier.com/#.17,.67,.83,.67.

opdracht

  1. Bestudeer de video instructie hiernaast: https://youtu.be/l6-fBB_lMvg.
    Deze laat alle leer-elementen zien.
  2. Bekijk de video daaronder: https://www.youtube.com/watch?time_continue=1&v=ew-9yvrzSsI. Deze laat zien wat je met deze kennis vervolgens zou kunnen maken: een verborgen menu dat met een mooie terugslag invliegt.
  3. Bedenk zelf hoe de documentstructuur dan moet zijn en de class-namen die worden toegevoegd of weggehaald.
  4. Het na-ijleffect ontstaat doordat je in de CSS de opeenvolgende items selecteert met :nth-child()-selector.
    Elk van deze elementen geef je een steeds grotere transition-delay.

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 JS-CSS animatie.