GetHiFi.com is all Rainbows and Sunshine

We recently launched a teaser-site for our upcoming CMS, HiFi. It's still a bit premature to be talking about the details of HiFi in this space (sorry!), so instead I want to explain how we implemented the nifty color-changing header.

Joel deserves most of the credit here, since he came up with the concept and did most of the coding. I just tweaked things for a smoother result.

The secret to the ever-changing color scheme is an 8000-pixel wide image containing a continuous color gradient. This image is tiled vertically across the header section of the website and overlaid with several other semi-transparent PNGs (IE6? We don't need no stinking IE6) containing the logo, hightlight around the logo, and the dark edges along the top and bottom.

We are using JavaScript to slowly move the gradient from right to left, exposing a contiuously changing portion of the color spectrum. The script itself is very simple, but it relies on jQuery and the jQuery Background-Position Animation Plugin.

$(document).ready(function(){
    var initialPos = (Math.floor(Math.random()*8000)+90000) + 'px 0';
	$('#slider')
	   .css({backgroundPosition: initialPos})
	   .animate({backgroundPosition: '(0 0)'}, 1500000, 'linear');
});

We start by generating a random initial position along the gradient. Actually, we're starting at the end, and moving backwards so the colors fade from right to left. Once we set the starting position, all we need to do is setup a very slow animation of the background position. The animation takes 1500 seconds—25 minutes—and will cycle through the full rainbow twelve times. Since background-images repeat by default, the gradient will wrap around whenever it reaches the end.

That's all there is to it! Be sure to sign up on GetHiFi.com to receive a notification when we're ready to launch, and follow our blog for more behind-the-scenes information in the mean time.