Its out!! Check out some of the stuff I put in the site:
I retrieve local weather data by sending lat lon (using HTML5 Geolocation API) to OpenWeatherMap. This comes back with a bunch of cool stuff I use to change the header
background color to represent the daylight and create weather animations.
To figure out the daylight I use the local
sunset timestamps and the current time to figure out a percentage between the two sun times and use
Math.sin() to create a smooth wave to apply to the opacity of the
background-color, I also multiply this by
1.25 and cap the variable at
1 so that the header stays
white between late morning and early afternoon.
If the daylight falls below
0.5 the text color, brick color, the orange samurai and the turn white.
Ofcourse the Weather API comes with weather conditions, I’ve catered for Rain, Snow and Clouds for now. In each case, the weather condition has more details of the condition.
Rain and Snow ?❄️
In the case of rain or snow, the Weather API supplies the last hour’s rainfall / snowfall (depending) volume, using this I determine how much rain or snow is animated. CoffeeScript
extends came in handy here! ????
With the snow, it doesn’t fall perfectly in a line, each flake randomly moves left and right which I thought looked more natural.
Splashes and Setting/Floor Snow ?⛄️
As soon the falling weather hits the floor, it creates a floor version of itself, animates and then fades away (drys / melts ????):
Setting Snow ⛄️
In the case of clouds, the Weather API supplies a percentage.
When the browser is resized the clouds fade away and a new set of randomly positioned clouds are generated and fade in.
All the weather conditions are affected by the direction and strength wind returned by the API, this only really takes affect if the wind is blowing east or west.
The Orange Samurai
The rectangle with eyes and a ponytail is controllable, he is controllable with the arrow keys, a gamepad or with a “virtual gamepad” for touch.
Movement, Ponytail Motion and Random Blinking
Gamepad Control Settings
To support weird and wonderful gamepads with non standard mapping, I’ve provided the ability to change the controls:
I was toying around with different ways of showing the “Virtual Gamepad” without it being there all the time. What I came up with was to show it when menu is expanded.
Super Mario influenced brick navigation.
One of the bricks is intentionally a because of the Super Mario bricks. This will hopefully give users who play Mario a hint what to do to the bricks.
History API (no reload)
Page doesn’t reload (uses Ajax), but pushes the new page into your history meaning the back/forward buttons work, in the template, I do a simple check to see if its an AJAX request, so the template doesn’t render the header and footer if it the page is being loaded dynamically.
This also works with Google Analytics too just by notifying GA the page is now different.
I also added in some transitions for the navigating between bricks (left and right), or Older and Newer posts:
- Timber + Twig
- Jade (made up:
.twade, however it should be
.twugnow due to Jade’s renaming)
Using Git and GitLab