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
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
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.