Day 27 – Rainy Day

It was a rainy day in Vancouver today so I wanted to recreate the weather! I did not know how to create a water droplet shape. Drawing out different values for the css border-radius property was super helpful!
IMG_9986A rounded droplet shape could be created by setting all corners except one to be 50% and the lone one to 0%. The droplet could then be rotated 45 degrees into its upright position.

For the rain, I created 150 of these droplets and placed them at random locations along the width of the user’s browser. Each droplet was a div that was appended onto the bigger div and had an individual id. I then used a random number generator to choose which ids would continuously fall.

For the frog and his umbrella, I used what I learned from Hungry Santa to make the character follow the cursor. To shield the frog from the rain, I created a long vertical div that was the same color as the background.

A problem: the user wasn’t able to click the navigation buttons! (The umbrella would cover the links.) This was solved by putting a higher z-index number for the navigation links so that they were always available.
RainyKeep smiling on the rainy days!

Day 27 – Rainy Day


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s