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!
A 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.
Keep smiling on the rainy days!
Day 27 – Rainy Day