Kop 1

CD covers

Een oefening om te animeren met CSS.
Beweging kan met de transition-eigenschap, maar je krijgt meer controle met @keyframes.

CSS animatie: de opdracht (00:00:53)

In deze tutorial zie je hoe een CSS-animatie wordt ingezet. Er zijn CD-covers, die bij een rol-over hun informatie laten zien.
Het hele effect heeft geen JavaScript nodig.

CSS animatie 1: de mark-up (00:10:49)

Voor een effectieve CSS-animatie is een kloppende mark-up vereist.
Elk van de covers zit ingepakt in een div. Het is wellicht beter hier een section te kiezen.

Elk van die div's heeft dezelfde class-naam. Kies zelf een geschikte naam: laat deze niet gelijk zijn als in de instructievideo, maar wees origineel!!

Binnen deze div komt eerst de afbeelding van de cover en daarnaast een article-element, die de tekstuele inhoud bevat zoals, kopjes, paragrafen en opsommingslijsten.

CSS animatie 2: stijlen toevoegen; transition (00:18:32)

Elke cover heeft een eigen div. Deze wordt net zo breed gemaakt als de afbeelding van de cover.
Om de div's naast elkaar te plaatsen, geven we ze een float: left mee. Ook enige marge is wel prettig om de covers uit elkaar te plaatsen. (er zijn natuurlijk ook andere oplossingen te bedenken om de elementen naast elkaar te plaatsen). De floatende elementen zitten elkaar nog een beetje in de weg ten gevolge van hun onderlinge verschillende hoogten. Dat is hier eenvoudig op te lossen omdat het article toch verborgen moet worden! We geven de div's een hoogte precies gelijk aan de afbeeldingen. We zien dan direct dat het flaoten beter uitpakt. De overbodige informatie treedt echter wel buiten de beperkte ruimte.

Ook dat is direct op te lossen door de div's een overflow: hidden mee te geven. Je ziet dan alleen de afbeeldingen.
We gaan nu proberen de inhoud een beetje over de afbeelding naar boven te 'trekken'. Eerst geven we zowel de div als het article een position: relative. Daarna geven we het article een fikse negatief bovenmarge. Als je ook de achtergrond deels transparant maakt, zie je de tekst over de afbeeldingen komen. We proberen uit hoeveel negatieve marge er nodig is om de afbeelding helemaal te bedekken.

We maken de bovenmarge weer 0 en geven deze gevonden waarde juist aan de article in de div waar de muis boven komt. Daarvoor is de selector :hover nodig. Zonder de classnaam is dit iets als div:hover article.
Wil je dit in dan in een overgang zien, dan geef je aan de oorspronkelijke div article de transition eigenschap mee met de eigenschap margin-top en de tijdsduur.

CSS animatie 3: de stuiter (00:13:55)

De transition is wat beperkt. Een stuiter is ook mogelijk. Eerst zijn de waarden van de beweging in de tijd bestudeerd. De transition-eigenschap wordt verwijderd.
De hover-state geef je dan een animation-eigenschap met als waarde een identifier. Hier is dat 'naar-boven'. Ook de tijdsduur stel je daar in en de waarde waarde voor de fill-mode: forwards. Daarmee geef je aan de dat eindpositie van de animatie na afloop bewaard moet blijven.
Vervolgens de identifier bouwen met de @-keyframes opdracht. In deze identifier geef je bij elk percentage van de animatie an wat de eigenschappen moeten zijn. Dat kan met heel veel tussenstapjes. Een stuiter bereikt in korte tijd de eindwaarde maar keert telkens met kleinere hoeveelheden weer een beetje terug om uiteindelijk de eindwaarde te bereiken.

Bedenk dat in de instructievideo gewerkt wordt met Chrome. Vandaar de dit iets oplevert als:

  @-webkit-keyframes mijnMooieAnimatie {
    /* de CSS opmaakregels
    bij verschillende keyframes */
  }

  @keyframes mijnMooieAnimatie {
    /* dezelfe CSS opmaakregels
    bij verschillende keyframes */
  }

CSS animatie getriggerd door mouse-events (00:13:19)

De CSS animatie start ook als de pagina geladen wordt. Om dat te voorkomen, halen we de animaties weg bij de albums en de hovers van de albums.

Het plan wordt om een JavaScript te maken dat een class koppelt als de muis een album gaat raken of gaat verlaten.
We maken de CSS animaties dus bij nieuwe (nog niet bestaande) classes.
Het is een veelgebruikte techniek dat CSS animaties gestart worden door JavaScript.

Maak dan het script met daarin een variabele aan, die alle elementen met een class-naam bevat. Daarvoor gebruiken we .querySelectorAll(). Doorloop met een for-lus deze variabele en geef elk element een eventListener mouse-enter, waarbij er een functie wordt aangeroepen, die de class-naam toevoegt. Dit kan via .classList.add();
Door het event moeten niet alle elementen die class krijgen, maar alleen het element waar het event plaatsvindt. Dit gaat via e.target, waarbij e het event is.
Is de juiste functie aangeroepen, dan zal bij een album waar de muis raakt, de animatie naar boven aangeroepen worden.

Vervolgens moet er nog voor gezorgd worden dat bij het verlaten van het album de animatie gestart wordt, die het artikel weer naar beneden laat stuiteren. Daarvoor maken we een vergelijkbare functie aan. Die gebruik maakt van de opdracht classList.remove();
Deze wordt ook aangeroepen door in de for-lus elk element ook een mouse-leave event te geven.

Bonus opdracht

In de opsomming van de playlist, zou je ervoor kunnen zorgen dat de tijdsduur netjes rechts lijnt, en de titels links.
De tijdsduur stop je daarvoor in een spanelement of in een em-element.
In dit voorbeeld is dat gedaan door de list-items een display: grid te geven en ze in 2 kolommen te verdelen, waarbij de tweede een waarde auto heeft. Dat betekent dat deze de breedte krijgt, die zijn inhoud nodig heeft. De eerste kolom kun je dan de overige ruimte geven.

Een andere mogelijkheid dat je de list-items in de track-list om en om een andere achtergrondkleur meegeeft om de leesbaarheid te vergroten.

Je kunt misschien ook zelf een uitdaging bedenken.

Inleveren

• Na afloop plaats je deze training online.
• Valideer jouw document op Markup Validation Service van W3C.
• Plaats daarvoor de validatie icoontjes in de footer.
• als je de markup hiervoor nog niet hebt, vind je hier.
• Plaats de gemaakte bestanden op GitHub. Maakt daar ook een README.md bestand aan, die naast een eventuele beschrijving van deze repositry ook een link bevat naar het online resultaat.
  Als je (delen van) de bonus-opdracht hebt gedaan, vermeld dat dan ook in de README.md.
• Lever een de URL van deze GitHub repositry in op ELO Magister.

Checklist