Web Animation


HTML, CSS, JavaScript, Photoshop


This is a cute form card for a juice shop. Supposedly, visitors could fill out the form by clicking the dog button, and then make an order of it. Since it is a juice shop, so I purposely made the form more like energetic, refreshing. The background is about moving lemons, which gives users a kind of refreshing and interesting feeling.

  • Attract new users/customers
  • Increase the number of orders
  • Increase the numbers of returning users, as well as new users
Design Process

In order to make the form card more interesting, so I chose a dog button to make it look funny and attractive to visitors. Also, I added the moving objects to the background, so it will create more funny feeling to visitors. The animation is very moving from top to bottom, and the card will pop up after clicking the button. The problem was adjust the button and make it fit into different screen size.

Also, when visitors click the button and fill out the form, the form's background actually will change from pink to grey. Especially, when people hover over the form area, the colour will be changed along with the actions. I brought the images I will be using into Photoshop to mask them, colour them, resize them, etc. Also, it is important to make the form responsive and interactive.