0

I'm relatively new to JQUERY and I'm looking for a point in the right direction.

How do I achieve a fade on scroll effect?

Like http://fearthegrizzly.com/ or http://davegamache.com

Ideally I'd like the option to drop whatever image I want to fade out into a div. If that's possible.

It's probably worth mentioning I want to implement this on Cargo Collective.

Thanks

Michael
  • 515
  • 2
  • 13
  • 25

2 Answers2

17

fearthegrizzly.com uses a .css() method. You could try:

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

You scroll down 250px, the property is fully faded out and vice versa.

Tim
  • 1,680
  • 2
  • 15
  • 21
  • 1
    Really cool, just what I'm looking for (similar effect to fearthegrizzly)! Is there away to add a delay? So the fade starts after 200px or a % value? – user1406440 Jan 25 '15 at 11:32
1

Tip for asking question: Don't just tell us what you want. We're not here to do your work for you. Show us what you've tried so we can help fix it.

That being said, this is a start...

When the window's scroll top position is greater than 20px, it fades a div out, when you scroll back up, it fades it back in.

$(window).scroll(function(){
   if($(window).scrollTop()<20){
         $('.fader').stop(true,true).fadeIn("slow");
   } else {
         $('.fader').stop(true,true).fadeOut("slow");
   }
});

DEMO

sachleen
  • 30,730
  • 8
  • 78
  • 73
  • Hello – sorry for my nOObines. – Michael Jul 13 '12 at 09:02
  • Hello – sorry for my nOObines. I forgot to mention I'd attempted http://stackoverflow.com/questions/9438894/how-do-i-fade-a-div-in-out-on-page-scroll but to no avail. I'm afraid your suggestion didn't work: http://cargocollective.com/btatest. Thanks anyway! – Michael Jul 13 '12 at 09:20