Let your front end animate itself according to the setting sun, like this Syracuse, New York sunset against this colonial home.

Circadian-based Animation of CSS Properties in Real-Time With No Javascript.

Using: php (novice) css (intermediate). Takes 5 minutes.

I recently wanted a way to change my site’s background, say, to correspond to the current time-of-day. or more specifically, to correspond to the current amount of daylight in my specific location. You can’t just use some hardcoded time-of-day value to represent when day ends and night begins, since the day length and time varies every day of thee year.

There were existing bits and snippets out there that would allow you to cobble together a solution for this problem in various ways including a few flaccid javascript approaches.

I thought I could write a concise and simple solution using no javascript, with the goal of being as lightweight on my final rendered web page as possible.

Here is a link to a finished demo where you will find the animation effect in action, showing army green shades for the site’s background during daytime hours relative to my home here in Oregon today, but if you catch it dawn or dusk you will find the demo (and my own portfolio site) lit up in pink and orange hues. At night, it’s a calming deep blue and black with candle light colored text.

Another paragraph on the demo page shows the 24 hour animation elapsed into 15 seconds so you can get a feel for how it will behave over the day if left open.

I’ve provided the source to the demo here on github.

Include the script(or paste it into the object or model where you need it)

You can include the circadian_css_animation.php script within the <head> section of your own html view as shown in my index.php demo script:

Set config values for your location or target user’s location

In the circadian_css_animation.php script, set the config values at the beginning of the document for our current lattitude and longitude coordinates which we will be using to request sun cycle data from php’s built-in date_sun_info().

This handy function presumably uses some newtonian formulations to approximate celestial movements at any given time and place on the globe, but I never bothered to check under the hood myself.

date_sun_info() returns a collection of unix timestamps marking various keypoints in the daylight cycle. See the documentation for an exact defintion of each key point you have access to work with here, or just consult this diagram at left for a quick idea.

Extra Credit: If you want to set flags for the page to conditionally show or not show certain elements based on your page being viewed at certain points of the circadian cycle, I’ve included an example of that…

The example that follows loads a random image from different sets of images with each set corresponding to different times of day.

You can adapt this concept to switch anything based on the above day cycle events.

That really is all the smoke and mirrors involved here. Now to display our solution we’ve crafted so far we just need some plain old css, a textbook use-case from the ‘animation’ keyword documentation page.

What the script is doing

Have a look at the generated source of the result css output to index.php the browser demo:

I’ve pre-sorted the results of date_sun_info() from earliest circadian event to latest, and we will just neatly print out the circadian cycle event keypoints as keyframes in our animation (and later set that animation to run over a duration of 24 hours to complete 1 cycle).

Now that the animation is defined for the css properties of your choice, just assign this animation to whichever elements you need to.

All-Circadian-Based-Everything

In the demo I’m affecting only body background, text, and link colors, but use your imagination here. You could use the end-user’s ip location to affect their specific view of a page, or let’s see it hooked up to some 3d transforms in some cool way!

I hope you found some part of this useful for implementing your own circadian-based effects on your website. Please share with me what you’ve created with the ideas you were inspired by from this, and I welcome any feedback or questions on this!