Halloween Animation Card

This project is about creating a custom animation card to practice the role of a designer with basic knowledge of web technologies.

Time

Jul 2020

Tool

Adobe Illustration, HTML, CSS, jQuery

Role

Graphic designer

1.Planning

I decided to create a Halloween greeting card. For graphics, I needed the main one and backdrop effects. To give a scary and dark image, I used black and grey colors. I also used a different orange color for pumpkins, and gradation for the moon.  For floating effects, I would like to add maple leaps to the present fall mood. I started creating graphics first and then I moved to code the card.

 

2. Creating Asset

All graphics were created by using Adobe Illustrator. First of all, I created a backdrop. For the backdrop, I especially focused on connecting each element to repeat horizontal, constituting a scene. Next, I created three different color and size maple leaps for floating effects.

 

3. Coding the card

  1. The card is completed by using HTML, CSS, and jQuery. Assets were imported and animated with CSS custom animation. For card effects, jQuery library helps the ghost graphic is animated as a button that trigger the card to be shown on the screen.