Interface Controlled by Weather & Time

I’ve designed Tisha Creative’s header by stacking 2 Images on top of one another. The top layer composed of a transparent PNG file sits on top of a bottom layer containing the backdrop image. The effect of resizing the browser window and seeing the skyline slide along the backdrop is achieved through Using 2 separate background styles for each of the DIV tags containing the images.

Having successfully achieved the effect I wanted to take it a step further by having the 2 images change based on local time here in Hoboken, NJ, giving our site a more personal feel. Our CEO however, gave me a challenge by stating how great it would be to have our site changed based on our local weather conditions.

The biggest challenge was finding a weather source online with an open API. I found that not only was Yahoo the ideal solution for this task, but that the site had over 47 different potential weather conditions for any US zip code allowing me to pull the variable directly through an RSS feed.

I chose to work with the top 9 weather conditions, by creating 9 CSS files which load on the site based on the current forecast here in Hoboken. Combined with the day and night script the Tisha Creative website has 18 distinct looks which will load based on time and weather.