Blog

Where we discuss our work, thoughts, and process

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.

GetHiFi.com Landing Page

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.

Gradient

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.

Comments

Gabriel himself's avatar
Gabriel himself

Marvelous.
Thanx for sharing...

andy matthews's avatar
andy matthews

What sort of performance issues might you expect with an animation thats running that long? Have you let a browser window just sit for an hour or two to see what happened.

Joel Sutherland's avatar
Joel Sutherland NMC team member

We have seen almost no performance issues even running the site on a six year old laptop. It does stop after 25 minutes.

Ultimately it is just a timeout loop that increments a value. The first ten seconds are just as difficult for a machine as the last ten seconds.

Additionally, by animating the background image the browser is likely able to optimize things by dumping the parts that get clipped from memory. Such optimization is not possible in JS alone.

andy matthews's avatar
andy matthews

Great. Thanks for sharing. The effect is quite attractive.

eyko's avatar
eyko

Very cool... also very cpu intensive... Really, my CPU went 80% average!

Leave a comment

Real Time Web Analytics