Background Fade

Discussion in 'Web Design and Development' started by Aperture, Aug 2, 2007.

  1. Aperture macrumors 68000

    Aperture

    Joined:
    Mar 19, 2006
    Location:
    PA
    #1
    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!
     
  2. Matteh117 macrumors regular

    Joined:
    May 24, 2007
    Location:
    Surrey, UK
    #2
    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
     
  3. yagran macrumors 6502a

    Joined:
    Jan 8, 2007
    Location:
    Brighton, East Sussex, UK
    #3
    ill do you a script in a bit. just goin in the pool
     
  4. rajfantastic macrumors member

    rajfantastic

    Joined:
    Jun 9, 2007
    #4
    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.
     
  5. Aperture thread starter macrumors 68000

    Aperture

    Joined:
    Mar 19, 2006
    Location:
    PA
    #5
    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
     

Share This Page