Fade out background image on parallax using scroll

Question

I am using this parallax plugin to add some parallax scrolling background images to my site:

http://pixelcog.github.io/parallax.js/

Now I would like the image to fade out on user scroll, similar to this website:

http://fearthegrizzly.com/

I have tried using the following code, but I think due to how the plugin is working it is not fading out:

$(window).scroll(function() {
    $(".parallax-holder").css({
    'opacity' : 1-(($(this).scrollTop())/250)
    });
});

I have created a pen here which is where I have got to:

http://codepen.io/mikehdesign/pen/KVKNyr

How can I get the image to fade out on user scroll - do I need to change where the jquery is targeting? I have a few parallax images on the page so would need to be able to target one specifically. I am happy to switch plugin if that is where the problem lies.

Thanks!

Answer 1

Try this instead friend:

$(window).scroll(function() {
  $(".parallax-mirror img").css({
    'opacity': 1 - (($(this).scrollTop()) / 250)
  });
});