Kop 1

In deze tutorial reeks gaan we op animatie in.
Er zijn situaties waarbij je de animatie helemaal in CSS kunt realiseren, maar je kunt ook prima controle houden door de overgangen in CSS te schrijven, maar ze te starten met JS.
Dat starten gebeurt dan doordat je elementen een class toevoegt (of wegneemt) waardoor een CSS-eigenschap een andere waarde krijgt. Daartussen kan dan via een transition de animatie worden uitgewerkt.

Leerdoelen

• Opfrissen transition- en animation-eigenschappen in CSS
• globale en gedeeltelijke kennismaking met CSS-Flexbox
• toepassen JavaSript-events
• .classList.toggle()

Animatie oefeningen stap 1: het resultaat (00:01:44)

In deze reeks gaan we aan de slag met animatie. Je ziet hier een animatie, die na enige tijd na de opening begint. De animatie kan weer worden teruggedraaid en herhaald, door op een knop te klikken.
Hetzelfde gebeurt met het menu op deze mobiele pagina met het menu. ook daar vindt er na een klik en animatie plaats. Hier wordt duidelijk de de klik tot gevolg heeft dat er classes worden toegevoegd aan de elementen. Met deze nieuwe class zal een animatie worden uitgevoerd.
Het menu en daarmee ook de animatie daarvan past zich aan aan de viewport.

Animatie oefeningen stap 2: knop en element centreren (00:11:46)

Alles wordt vanaf scratch gemaakt. Er wordt een main element gemaakt, die een knop en een vlakje bevat. Deze main moet minimaal 100vh hoog zijn om de beide elementen ook verticaal gecentreerd te krijgen.
Het centreren gaat met flexbox. Omdat de knop en het vlakje children van main zijn geven we main en display: flex. Elementen die geen ingestelde hoogte hebben, krijgen dan een hoogte van de parent. Daarom stellen we de hoogte van de button ook in.

Om de children te centreren geven we de main ook een justify-content: center; voor een horizontale centrering en align-items: center; voor de centrale centrering.
Om het vlakje niet tegen de knop te laten leunen, krijgt deze een transform-eigenschap mee met als waarde translateX(1em). Deze oplossing is hier vooral praktisch omdat we de animatie ook met transform zullen gaan uitvoeren.

Animatie oefeningen stap 3: vlakje animeren (00:10:55)

Om te animeren geven we het vlakje een extra class mee. (Hierbij is gekozen voor een modifier volgens de BEM-naamconventie).
In de CSS geven we de transform-eigenschap bij deze class een andere waarde.
We kunnen nu heel goed de start- en eindpositie van de animatie instellen.
Met JavaScript geven we de knop een event-listener mee. Bij een klik wordt de class van het vlakje aangepast met .classList.toggle(). Als de class er al is, wordt deze verwijderd, is de betreffende class er niet, dan wordt hij toegevoegd aan het al bestaande class-attribuut.
Je kunt dat in de inspector van de video ook zien.
Om te voorkomen dat er een horizontale scroll-balk komt, geef je de main een overflow-x: hidden; De eigenschappen in de animatie blijven na dit principe aanpasbaar.
De easing wordt verzorgd met cubic-bezier: https://cubic-bezier.com/
Kortom: het JavaScript past classes in het element aan en de CSS zorgt voor de animatie.

Gebruik een eigen Bezier-curve en indien je nog niet gecommit hebt, doe dat nu op GitHub!
Bedenk voor de mededeling bij GitHub een passende mededeling.

Animatie oefeningen stap 4: menu stijlen (00:15:26)

Als sibling van de main word het nav-element toegevoegd. Daarin een ul die 4 child-elementen li krijgt. In elk li-element weer een a-element en dit allemaal volgens de BEM naamconventie.
Hierdoor wordt de inhoud naar beneden gedrukt, en dit voorkomen we door de navigatie een position: fixed; te geven. Hierdoor schiet de main onder de nav door en is de inhoud weer prima in de viewport geplaatst.

Ook wordt er met FontAwesome een knop voor dit menu toegevoegd.
Als de ul een display: flex; krijgt, dan komen de children daarvan naaste elkaar te staan en vullen ze de hele breedte op. Dat past niet voor een mobile device en dus kiezen we voor flex-direction: column; waardoor de children verticaal onder elkaar komen. Ze zijn dan ook even breed. Dat blijkt als de de linkjes in het menu een display: block; geeft.
Verder wordt alles geoptimaliseerd door het verbergen van list-styles, en text-decoration, een passend font, de kleuren en worden de paddings en de marges aangepast.

Animatie oefeningen stap 5: animatie uitstellen met setTimeOut() (00:03:32)

We gebruiken script voor de timing van animaties. We kunnen bijvoorbeeld hier het vlakje laten binnenkomen 2 seconde nadat de pagina is geladen.
Daarvoor gebruiken we setTimeout().
Deze heeft 2 parameters: de functie, die je dan uitvoert en het aantal milliseconde die de uitvoering van de functie moet worden uitgesteld.

Animatie oefeningen stap 6: De menu-items na elkaar inschuiven (00:16:51)

Eerst wordt de knop voor het menu van meer padding voorzien zodat de bezoeker deze eenvoudiger kan aantikken.
Hierna worden de menu-linkjes met een transform buiten beeld gebracht.
Daarna wordt er een class aangemaakt warbij de transform weer 0 is.
Het wordt de bedoeling dat als je op de menu-knop klikt deze class aan de linkjes wordt toegevoegd (via toggle, zodat een tweede klik ze weer weg schuiven.)
Voor het gemak maken we nu wel variabelen aan voor de menu-knop en de menu-linkjes. Deze laatste is een array en we lopen er daarom met een forEach() doorheen. Om ze allemaal een wat langere setTimout() te geven is er in de forEach() dus sprake van twee parameters: item en index.
bij elk item wordt de classList getoggeld en in de time-out krijgt elke item een uitstel van zijn index-waarde * 100 milliseconde.

Animatie oefeningen stap 7: Icons in de knop wisselen (00:08:50)

We hebben al script voor de menu-knop. Dezelfde functie kan dan worden uitgebreid met opdrachten, die het icon van de knop verwisselen.
We zetten eerst een sluit-icon bij de menu-icon in de knop: zowel de balkjes als het kruis.
De laatste krijgt dan ook een class 'verberg' mee.
Het script kan dan van beide icons de class 'verberg' toggelen.
Het verbergen lukt niet zo, maar door de selectie iets specifieker te maken, wordt van het FontAwesome-script gewonnen.
Mocht het dan nog niet lukken, dan kun je de knop-houder ook in de selector opnemen en als dat nog niet wil, deze een id geven. De specificiteit van de selector in CSS wordt dan steeds hoger.

Animatie oefeningen stap 8: Tussentijdse commits op GitHub (00:05:37)

Tussentijds worden er altijd commits op GitHub geplaatst.
In Visual Studio Code is daar de terminal op te roepen.
Wellicht is het praktisch om alvast een README.md voor de repo te maken met daarin een toelichting en een plek om op een later moment de live versie te publiceren.

Na de opdracht git init, kun je met git add . alle bestanden op de stage plaatsen.
Je maakt een commit en maakt op GitHub en repo aan.
Daarin staan de de resterende opdrachten om je repo remote te plaatsen.

Animatie oefeningen stap 9: menu responsive (00:08:21)

Voor bredere viewports maken we een mediaquery. Daarin komen de aanpassingen voor een breder viewport.
De items in het ul-element staan onder elkaar doordat de flex-richting verticaal was. Met flex-direction: row; wordt deze horizontaal.
De beweging het scherm uit, moet nu verticaal naar boven in plaats van naar links, en daarom zetten we dan in de mediaquery de translateX() om in een translate(Y).
De marge aan de bovenzijde van de items moet weg en daarvoor in de plaats een marge aan de linkerzijde.
Flexbox heeft de mogelijkheid de extra ruimte flexibel over de items te verdelen. Daarvoor moeten we de breedte van de nav eerst op de hele viewport stellen, want dat wordt door de position: fixed niet meer vanzelf aan de nav toegekend.
Daarnaast moeten we an de items vertellen hoe ze de breedte vullen. We kunnen flex-grow op 1 stellen, dat betekent dat de items de onderlinge ruimte gelijkmatig verdelen. Dit kan ook met de flex-eigenschap: als je die flex: 1 0 auto geeft, dan geef je aan dat de flex-grow 1 is, de flex-shrink 0 is (flex-shrink geeft aan hoe er bij een tekort aan ruimte de schaarste wordt opgevangen) en flex-basis, welke de start-waarde is waar de herverdeling vanuit gaat.

Animatie oefeningen stap 10: verfijning van de animatie (00:09:30)

Met een na-ij-effect van de tekst binnen de linkjes, wordt de beweging wat natuurlijker. Weer eerst de mobile variant, die horizontaal gaat om daarna de verticale variant voor de brede viewport: mobile first.
Daarvoor wordt de tekst binnen de link naar een eigen element omgezet, en dat weer volgens de BEM-naam-conventie.
In de CSS kan er dan een eigen CSS-animatie aan toegevoegd worden.
Er wordt geselecteerd op het tekst-element als child van de class die door het JS wordt toegevoegd.
De animatie van de link-tekst loopt iets langer door dan de transition van de link en het beweegt in het zichtbare deel binnen de paddings van de link.
Het begint teveel naar links, schiet daarna door de 0 positie teveel naar rechts, nog eens terug naar links, maar wel minder ver en daarna naar 0. Het is verstandig om dit in een grafiekje weer te geven voor je de waarden van de keyframes-animatie gaat invoeren.

Animatie oefeningen stap 11: verfijning van de verticale animatie (00:04:24)

Verticaal verloopt het proces op dezelfde manier.
In de mediaquery geef je de animatie eenvoudigweg een aangepaste naam naam.
Daarna een eigen @keyframe-animatie met verticale verplaatsingen (die beduidende kleiner zijn omdat er vertikaal minder padding is) in plaats van de horizontale verplaatsingen.

Dan hebben we nu dus een training doorlopen met CSS animaties die door JavaScript zijn gestart. Het zijn zowel transitions als keyframe-animations geweest.

Bonusopdracht

Er zijn de volgende uitdagingen waaruit je kunt kiezen:

• Maak een tweede knop, die een ander element laat animeren op een andre manier dan in de instructie.
• Probeer in dit menu een dropdown te realiseren.

Heb je een of beide bonusopdfachten gedaan, vermeld dit dan wel in de README.md.

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;
• Tijdens jouw uitwerking plaats je regelmatig commits in een aparte repository op GitHub
• Maak in jouw GitHub-repo een README.md met daarin temnminste een link naar jouw online uitwerking.
• Plaats de GitHub-link in ELO Magister.