changing layout background based on weather in users location

Viewed 54

I am trying to make the top part of my site change background and have particles according to the user's weather and locale. I don't know how to approach this.

I have heard from some to use weatherbug api, would that be suitable? I am brand new to javascript.

The four main particles I am using are:

Sun Rays for clear skies

https://codepen.io/elijahskinner/pen/dyvGyJe

Rain for the obvious

https://codepen.io/elijahskinner/pen/vYxKxoq (I need to change the color of the rain for this one so it shows up better)

This for Snow

https://vincentgarreau.com/particles.js/#snow

I also have a falling leaves particle thing but I am not sure how to use that with weather instead of seasons.

1 Answers

I cannot say whether weatherbug would be suitable (and SO is not keen on us giving opinions/recommendations on libraries and other services) but you can search for weather services and weigh up what they offer, price, accuracy etc.

However, there are a couple of other factors in what you propose which you may like to contemplate before implementing this:

  1. The particles for your background can be very costly on processor time. I have just tried your rays particles on my fairly modern and with good GPU laptop. Nearly 30% CPU and 98% GPU were being used. The fan was whirring. This is battery flattening stuff so your users may not thank you.
  2. To get weather info for where your user is you need to know where they are... And to do that with some accuracy you may want their geolocation for which you will have to ask their permission, see MDN

My apologies that this is not a complete answer to your actual question but it got too long for a comment.

Related