Idé udvikling
For min idé process, havde jeg en del idéer som jeg synes kunne være sjov at realisere, men måtte også begrænse nogle idéer til måske fritids projekter da det vil være et større arbejde end hvad der var tid til til denne workshop.
Min første idé var denne “emote” jeg kendte til hvor en lille figur ryster med sin ‘booty’, det blev en enkel storyboard som visualiserede min idé og hertil fik jeg en videre idé som kunne være sjov at lave, en kat som ‘bouncede’ fra side til side.
Visualisering og creations
Mine figurere er lavet i illustrator, mine ‘booty’ person lavede jeg oprindelig 10 frames med, men jeg blev ved med at få fejl med størrelsen, så jeg fik nogle tal som ville hedde 19234,55px og med det ødelagde det min fil til når jeg skulle ligge den ind i CSS.
Jeg fik rettede mine filer og fik lavet det til 7 frames i stedet som jeg kunne arbejde med.
HTML & CSS
I vscode åbnede jeg en ny folder og lavede den under min vscode dokument – kaldt; CSS Animation, i dette dokument har jeg gemt alle de filer jeg skulle bruge til dette projekt.
Som extension bruger jeg Live Preview som jeg har åbnet når jeg skriver koden ind i både html og css, hvortil jeg så kan se alle de ændringer jeg laver.
For min egen skyld for at kunne huske hvorfor jeg har skrevet min kode som jeg har, har jeg skrevet noter på samme linjer.
I html brugte jeg <!– tekst –> for at kunne skrive noter
og i css er det skrevet som /* tekst */
Animationerne
For den grå kat “Lilo” så min kode sådan her ud:
For den runde kat:
For ‘booty’ person:
Jeg har både taget inspiration fra the 12 principles i form af anticipation, staging og solid drawings.
Refleksion
Det har været et rigtig spændende emne at sætte sig ind i og det har også været væsentligt sværere end hvad jeg lige havde regnet med i form af hvordan man skulle sætte sin html og css op og hvordan man hurtigt kan ‘break’ sit billede/animation.
Denne workshop har dog givet mig en del mere forståelse for hvordan jeg kan sætte mine ting op og hvordan html og css arbejder sammen.