Bij het vak Web-Animation leren we hoe je verschillende CSS-transities en CSS-animaties mmaakt die interactie toevoegen.
De opdracht is: Kies een kunstwerk uit het Letterform-archief of het AIGA-archief en vertaal dat naar het web. Wat gebeurt er als mensen met hun muis over bepaalde elementen zweven? Wat als ze op toetsen op hun toetsenbord drukken? Hoe moet het 'statische kunstwerk' zich gedragen op verschillende schermformaten? Probeer het eerst opnieuw te maken met webtechnologie (html-elementen, svg), voeg vervolgens interactiviteit en animatie toe.
Het kunstwerk dat ik heb gekozen is, heet: "How To Fix A Broken Heart and Make A Spare". Het kunstwerk is gemaakt door Tré Seals. Deze Afro-Amerikaan uit Accoceek (Maryland) heeft het kunstwerk in 2017 gemaakt.
Kunstwerk
Nadat ik het gehele kunstwerk in HTML en CSS had nagemaakt heb ik verschillende interacties toegevoegd aan het kunstwerk. Van boven naar onder, je kan het hartje uit elkaar halen, het kunstwerk is responsive, je kan de kleur van de achtergrond veranderen, je kan hover gebruiken op het kunstwerk en je kan je toetsen gebruiken om de tekst 3D te laten zien.
Interacties
Voor Web Animation moesten we een readme op Github maken waarin we alles heel specifiek uitleggen, ben je daar benieuwd naar, klik dan op de link hier onder.
Voor Web Animation moesten we ook een kort filmpje maken waarin je uitlegt wat je allemaal hebt gemaakt, wil je die zien, klik dan op de link hier onder.
En dan natuurlijk de link naar mijn eindresultaat van dit vak:
Ik hou er van om creatief bezig te zijn met code, en om dit te combineren met CSS-animaties was super leuk en leerzaam. Ik ben hardstikke trots op het eindresultaat!. Ik wil Danny de Vries heel erg bedanken voor de perfecte begeleiding van dit vak!
8,0