Deze week gaan we de focus leggen op animaties maken binnen een website. Het is mogelijk om animaties te maken met alleen CSS: je hebt er geen Javascript voor nodig. Deze week gaan we hiermee spelen en uitproberen.
Aan het einde van de week gaan we onze webshop voorzien van enkele animaties. Hierbij kun je gebruik maken van de technieken die je hebt geleerd tijdens de challenge dagen.
| Dag | Taak |
|---|---|
| Maandag | • Rubrics Module 3.1 doornemen |
| • feedback verwerken / site mooier maken | |
| • eJournal invullen, met belangrijk onderdeel: feedback verwerkt hebben en reflecteren | |
| Dinsdag | • Instructie algemeen (CSS transition + CSS animation) |
| • Instructie (10 min) + werken aan Challenge 1 | |
| • Instructie (10 min) + werken aan Challenge 2 | |
| • Instructie (10 min) Challenge 3 |
| | Woensdag | lesvrij | | Donderdag | CSS animatie in eigen webshop bouwen | | Vrijdag | CSS animatie in eigen webshop bouwen |
<aside> 💡
Voordat we aan de slag gaan met challenge 1, 2 , 3, maak je een GIT-repo aan, gebruik hiervoor deze github classroom:
https://classroom.github.com/a/wXKvRRot
</aside>
Clone bovenstaande repo en maak lokaal mapjes aan voor elke challenge genaamd challenge_1, challenge_2, challenge_3. Maak ook een README.md waarin je in het kort omschrijft waar deze challenges over gaan en wat jij straks gaat maken. De omschrijving mag heel beknopt zijn.
Voorbeeld “first commit”
Volg nu de stappen van de onderstaande challenges.
| Omschrijving: | Tekst met masker + animatie |
|---|---|
| Techniek: | CSS3, transition, text-transform |
| Moeilijkheidsgraad: | Beginner |
In deze challenge ga je een tekst voorzien van een masker. Als je met de muis over de tekst (H1) gaat, dan moet er een animatie worden getriggerd. De animatie bestaat uit een afbeelding die alleen moet worden getekend op de plek van de tekst. De tekst zelf is dus het masker: het geeft het gebied aan waar op mag worden getekend (render).
Voorbeeld Challenge 1 (eindresultaat)