If you’re feeling nice give us a mention on your web site/blog/twitter/facebook/bebo/myspace or to your mates down the pub.

How it works

The technique is actually a lot simpler than it looks, it’s based around scrolling a very tall gradient image behind some transparent PNG images. The header image (with our logo, strapline and the laptop) has a transparent background and solid text, while the main page is actually an image with the heading text as transparent cut outs.

The images

We’re using four images for the whole effect, but you could make it worth with just the background and header if you wanted. We have:

• The background
• The header
• The content
• The footer

The CSS

To keep the search engines, screen readers and pre-historic browsers happy we’ve also overlaid all content and headings on the top of the images, and hidden them via CSS.

The JavaScript

The JavaScript is where the real magic happens. We’ve made use of the jQuery library and Alexander Farkas backgroundposition.js script and CSS to help make the background move.

The code below makes the whole thing work. The comments should explain what each section does.

$(function() {
 
	// ***
	// Scrolling background
	// ***
 
	// height of background image in pixels
	var backgroundheight = 4000;
 
	// get the current minute/hour of the day
	var now = new Date();
	var hour = now.getHours();
	var minute = now.getMinutes();
 
	// work out how far through the day we are as a percentage - e.g. 6pm = 75%
	var hourpercent = hour / 24 * 100;
	var minutepercent = minute / 60 / 24 * 100;
	var percentofday = Math.round(hourpercent + minutepercent);
 
	// calculate which pixel row to start graphic from based
	// on how far through the day we are
	var offset = backgroundheight / 100 * percentofday;
 
	// graphic starts at approx 6am, so adjust offset by 1/4
	var offset = offset - (backgroundheight / 4);
 
	function scrollbackground() {
		// decrease the offset by 1, or if its less than 1 increase it by
		// the background height minus 1
   		offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
		// apply the background position
   		$('body').css("background-position", "50% " + offset + "px");
   		// call self to continue animation
   		setTimeout(function() {
			scrollbackground();
			}, 100
		);
   	}
 
	// Start the animation
	scrollbackground();
}

The really clever bit…

You may have noticed from reading the code above, but if you come and visit us later in the day you’ll see the background position start from a different place. If you visit us at night, you’ll see a night sky, and if you visit us in the morning you’ll see a sunrise!

If you have any comments, questions or improvements to the script – drop us an email or leave a comment here.

Updated 2009-07-30

After a few comments regarding the processor usage under FireFox 3.5 i’ve updated the script to no longer use backgroundposition.js or jQuery’s animate() method – it now simply changes the body’s CSS background-position value by 1 pixel on each loop iteration. CPU usage on an older machine running FireFox 3.5 went from around 65% to 30%. All other browsers still appear not to struggle with it. Feedback welcome!