We’ve had a lot of questions regarding the background effect on our new site – so I thought I’d explain how it works, to save you the trouble of picking through the source code. Feel free to base your own designs on this technique, but don’t just straight up copy our code and images – we’ve spent a good amount of time on this.
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.
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 1offset = (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!