Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Aperture

macrumors 68000
Original poster
Mar 19, 2006
1,876
0
PA
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. (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!
 
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
 
here is a script that i used for one of my sites. it's based on an old version of mootools so it may have to be re-written slightly:

Code:
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:

Code:
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.
 
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. :eek: My coding experience is somewhat limited and I was hoping for maybe a tutorial or at least a bit more in depth instructions.

Thanks
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.