/ Web Design

My Site Header

So you are visiting my site at different times of the day and the header is never the same? Arn't you curious what is going on? My header is 100% animated and even better, always changing based of the time of day every second.

The header design was a concept I had in the early days of 'the rabbit hole' 3rd or 4th design where based off the date of year it set itself to one of four very basic images:

  • Summer - With flowers, etc.
  • Fall - With leafs
  • Winter - A snowy top
  • Spring - Just some grass on the ground

At one point during the whole Adobe Flash craze the header was a flash animation that also, based off the current time of day that you were visiting, would update the header "gradient" based off the time period. For example, if you came during the morning period of sunrise, the "sky" would be blue, but it have differential shades of blue as it filled up the sky. Since Flash was being being blocked by ad-blocker and other scripts because of the security vulnerabilities (and Adobe recently killed off Flash for this reason), I evenly tried to move the header over to pure javascript.

Today, the header is still running in Javascript, but it’s using HTML5 canvas technology drawing out the animation you see above every second using a gradient patterns for each segment of the day. Currently it’s showing the header times based off Brooklyn, NY. So even if your computer’s time was on the West Coast of the US, it would use your clock, but based off Brooklyn, NY “sun times” calculation.

So visit often to not only to keep up on the content, but also the header to see how it’s evolving over the course of the day. I’ll have more series on the header as the days go on as it’s quite a technological achievement and some more features added as time goes on. 😀



Shane is the founder and author of 'the rabbit hole'. By day, Shane is a System and Network Engineer living and working in the NYC area. Free time includes movies, escaping to the non-tech world.

Read More