< Gå tilbage

CSS Animation

Workshop

Projektbeskrivelse

Dette projekt gik ud på at lave en animation med Adobe Illustrator og HTML/CSS.
Man skulle lave et langt billede, som kunne trækkes “igennem” en kasse i HTML.

Produktion

Jeg startede med at tænke i idéer, hvad skulle animationen være? Jeg fik en lille idé i hovedet, som jeg så Googlede for at få noget inspiration til hvordan jeg egentlig skulle tegne det.

Jeg skitserede det først i hånden, hvor jeg så efter kunne åbne Adobe Illustrator op og begynde at tegne det. Min animation skulle være 500x500px, med 10 frames så jeg gangede med 10 i x-aksen, 500×5000 blev mit art board.

Jeg brugte ruler til at opdele hver frame, så jeg kunne se hvad jeg havde at arbejde med. Tegnede mit monster op, og kopierede ham på de andre frames hvor jeg så kunne rykke rundt på både øjne og mund siden jeg havde opdelt lag og grupper.

Da jeg endelig havde min animation, skulle jeg smide det over i HTML.

Her er nogle billeder:

Endelige produkt