Background Fade [Archive]

Aperture

Aug 3, 2007, 01:38 AM

Hi Guys. I'm not all that great at web design so while I'm working on my new site, this is what I'd like to do. When they click on "About", I'd like the background fade to the about page's background color. From there, I'd like to be able to click to "Contact" and have the background fade to another color.

Similar to the effect seen here. (http://mnjordan.com/)(Hopefully Mike Teezie doesn't mind me posting it - if you do just PM me)

I know that was in Flash but I was hoping for an alternative.

Thank You!

Matteh117

Aug 3, 2007, 04:43 AM

You could do this with JavaScript.

As I've only ever used the jQuery library, I can't really give you many pointers, but you could use this to change the opacity of the background whilst sending off an Ajax request.

http://www.jquery.com

yagran

Aug 3, 2007, 10:28 AM

ill do you a script in a bit. just goin in the pool

rajfantastic

Aug 3, 2007, 05:19 PM

here is a script that i used for one of my sites. it's based on an old version of mootools (http://mootools.net) so it may have to be re-written slightly:

var bgColor = new Fx.Color('body', 'background-color', {duration: 1000});

function changeColor(thiscolor) {
bgColor.toColor(thicolor);
}

and then i use this in my url, although there is a better way to do this using addevent:

onclick="changecolor('#CCCCCC');

you will also have to give your <body> tag an id="body" and also specify the background-color in a style tag on your main php/html page/template.

Aperture

Aug 5, 2007, 01:17 AM

Sorry for not getting back to you all, thank you very much for your replies. I hate to say this but I still am left clueless. :o My coding experience is somewhat limited and I was hoping for maybe a tutorial or at least a bit more in depth instructions.

Thanks