link to the page: https://gwenversteegh.github.io/Fireworkkieee/vuurwerk
Deze vuurwerkshow is gemaakt met alleen css. Dit was zeker een uitdaging, aangezien ik niet veel ervaring heb met coderen. Het is me gelukt om mijn grensen te verleggen en heel veel nieuwe dingen te leren met css.
Deze week was heel erg inkomen. Ik had meer dan een jaar niet meer met css gewerkt dus ik moest het weer even onder de knie krijgen. Ik ben begonnen met het volgen van een vuurwerktutorial op youtube (https://www.youtube.com/watch?v=K4K7HNavK4U&t=278s). Nadat ik deze had gemaakt heb ik meerdere variaties ervan gemaakt met meerdere kleurtjes en meerdere streepjes. Owjaa en ik had corona, dus ik moest alles vanuit huis doen :(
In week 2 kon ik eindelijk lekker op school werken. Ik ben begonnen met het maken van vuurwerkpotten in illustrator om een idee te krijgen hoe het eruit zo komen te zien en daarna heb ze gemaakt in css. Aangezien de potten uit illustrator heel gedetaileerd waren, kon ik dit niet namaken in css dus heb ik ze makkelijker gemaakt in css en heb ik een animatie gemaakt die veranderd in een pijl en dan vervolgens naar het vuurwerk op een hover.
In het laatste feedback gesprek werd er gezegd dat ik nog puntjes op de i moest zetten en details toe moest voegen. Mijn achtergrond was nog een plaatje dus deze heb ik vervangen voor een zelfgemaakte sterrenhemel, met een maan die langzaam beweegt. Daarbij was voor mezelf nog een doel om met checkbox te werken inplaats van met hover. Ook dit is gelukt en nu kun je het vuurwerk gewoon aanklikken. Ook heb ik in deze week mijn code netjes gemaakt.
Voor de herkansing had ik als feedback om meer te experimenteren met verschillende soorten vuurwerk en de vuurwerkpotten aan te passen. Ik heb de vuurwerkpotten 3D gemaakt en verschillende vuurwerkjes gemaakt. Ook heb ik de eindknal aangepast.
- Het gebruik van checkboxes
- Meerdere animaties op 1 checkbox
- Gebruik maken van clippath
- Verschillende soorten animaties
- moeilijkere animaties
- 3D objecten
Zoals ik al eerder zei was het voor mij best een uitdaging. Ik heb niet heel veel ervaring met css buiten de standaard vakken die je krijgt in het 1e en 2e jaar bij CMD. Het was in het begin dus ook echt wel even wennen. De eerste week ging het minst goed. Ik zat thuis met corona en daardoor kon ik minder dingen vragen en heb ik een kleine achterstand opgelopen. Dit heb ik wel weer ingehaald in de rest van de weken gelukkig die beter gingen. Bij de sterrenhemel had ik nog meer sterren met animatie, maar het vuurwerk werd hierdoor heel sloom helaas.
De uitdaging aangaan ging zeker goed. Ik ben elke keer met een stapje vooruit gegaan en heb steeds een nieuwe uitdaging voor mezelf bedacht. Tot op de laatste dag ben ik nog bezig geweest met mezelf uitdagen. Ik merkte dat op school werken een stuk scheelde omdat ik dan al mijn vragen kon stellen. De laatste week ging het best. Dit kwam omdat alles bij elkaar kwam en ik me doelen haalden en daarbij besefte wat ik neergezet had. Het lijkt misschien niet zoveel, maar voor mij was dit echt knokken.
Ik ben het meest trots op het gebruik van checkbox en de animatie van pot naar pijl naar explosie. Ook is het me gelukt om het goed responsive te maken waar ik voorheen niet veel aandacht aan besteedde.
- Grote eindknal
- meer vuurwerk per pot
vuurwerk tutorial : https://www.youtube.com/watch?v=K4K7HNavK4U&t=278s
algemene informatie: https://www.w3schools.com
glowing stars https://www.w3schools.com/howto/howto_css_glowing_text.asp
clippath maker https://bennettfeely.com/clippy/