How to do this fade out effect?

I want to archieve the fade out effect u can see on the text that is on the bannerimg, but havent succeded yet.

Ive tried this:

$(window).scroll(function() {
    if ($(this).scrollTop() > 200) {
        $(".button").stop().animate({
            opacity: 0
        }, 500);
    } else {
        $(".button").stop().animate({
            opacity: 1
        }, 500);
    }
});

but it doesnt work, it fades out the text when it reaches a certain scrollpoint… but i want the text to have different opacity depending on how much u been scrolling.

I’m not entirely sure what you’re trying to achieve, and I’m not sure what bannerimg you’re referring to. Could you link to an example of the effect you want?

Sorry, once again have i forgotten the link … here is an example: http://ollysorsby.co.uk/

The effect you’re after is called Parallax, and there are quite a few plugins out there for that. Have you checked out how they achieve the effect on that site? The code can be found in http://ollysorsby.co.uk/wp-content/themes/hero/js/theme_trust.js

// 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"
    });
  }