CSS Sprite Animation

Fredag d. 2 december, havde vi en CSS workshop hvor vi skulle, først, designe et stykke grafik i Adobe Illustrator og derefter animere det vha. en CSS-funktion kaldt Sprite.

Hele opgaven var en forholdsvis simpel proces.
Mikael Seegen foreslog mig at bruge mit eget hoved, og siden jeg længe har gået og tænkt på at lave et “tegnet” selvportræt, øjnede jeg chancen.
Lynhurtigt fulgte idéen med, at animationen skulle illustrere en tegnende effekt.

Storyboard der viser min idé.
Storyboard der viser min idé.

Jeg startede med at tegne omridset, på et billede af mig selv i Illustrator. Sidenhen farvelagde jeg det, så jeg fik en tegnet version af mig selv.
Jeg placerede 12 billeder på en lige linje, og begyndte at tilføje mere og mere fra billede til billede, der så ville skabe effekten. Sprite fungere på den måde, at den skjuler og viser valgte dele af et enkelt billede vha. “navigationskoder”, og på den måde kan man skabe en form for animation. Man skriver også hvor mange frames animationen indeholder og hvor mange sekunder den skal vare.

Frames
Alle frames som animationen indeholder.

Alt i alt, var det som sagt en simpel opgave, men lettere tidskrævende som nybegynder.

 

Se den endelige animation her!