https://godnoken.github.io/weather/
HTML, CSS, JavaScript, GSAP.
Visual 2D weather
Clouds
Raindrops
Snowflakes
Changing sky
Sun & moon
Real time data
Mobile support
I have used real time data from the https://openweathermap.org/ api "One Call 3.0" together with the geolocation API from the same company to let users type in any location they'd like to see the current weather of.
All data retrieved & displayed is based on the hour of the day.
Sun & moon's position is based on the time of the day and moves in an arch (If you leave the page running, it will move to the end in real time. Although you can not switch tabs as that will stop its movement)
Sky changes colour depending on the time of the day and cloud coverage
Stars show closer to the middle of the night and the visibility depends on cloud coverage
Cloud speed is based on the altitude (y-coordinate)
Cloud coverage is based on the % of the sky that is filled with clouds, divided by 10, due to performance and visual reasons (1 cloud per 10%, although 13% would yield 2)
Raindrops are based on the precipitation %, divided by 2 due to performance and visual reasons
Snowflakes are based on the expected Snow millimeters, divided by 2 due to performance and visual reasons
If a location has snow expected, it will override any rain precipitation due to performance and visual reasons