Forums

matthisco

Hello,

I'd like to fade out a div when the page is scrolled, similar to this site:

Here is my effort:

http://www.mharrisweb.co.uk/tester.htm

Its getting there but can anyone please tell me how I can fix and scroll over the background like in the hero theme and make it slicker?

Many thanks

CarlRosell

by looking in his code this is what drives the animation.

///////////////////////////////
// Parallax
///////////////////////////////

// Calcualte the home banner parallax scrolling
  function scrollBanner() {
    //Get the scoll position of the page
    scrollPos = jQuery(this).scrollTop();

    //Scroll and fade out the banner text
    jQuery('#bannerText').css({
      'margin-top' : -(scrollPos/3)+"px",
      'opacity' : 1-(scrollPos/300)
    });

    //Scroll the background of the banner
    jQuery('#homeBanner').css({
      'background-position' : 'center ' + (-scrollPos/8)+"px"
    });    
  }

CarlRosell

and then he detects the scrolling event and call that function every time.

jQuery(window).scroll(function() {        
         scrollBanner();        
    });

hope that was helpful.

matthisco

Thanks very much for your reply.

I have this example working:

http://www.mharrisweb.co.uk/

Is there anyway I can stop the green div scrolling over the top of the navigation?

Thanks again

benhanley

Hey,

Is your image in the background of that lime green div, or he background of the page? Could you not just make the div transparent? Sorry if this seems like a dumb suggestion, but it's such a cool effect, I'm going to have a crack at it myself now!

Ben.

treehouse : what would you like to learn today?

Forums

Css scrolling div problem