CODEWITHSUNDEEP
jqueryscrollfadein
WIWIWWIISpitFire
WIWIWWIISpitFire

Reputation: 1549

Fade out image gradually while scrolling

He guys,

I could use some help with a question I can't seem to find on the web. I'm trying to fade an <img> within my header. I want this image to gradually fade out while scrolling down, when scrolling back up, the <img> should gradually fade back in.

Do I have to bind a scroll event to the opacity of the img? But how?

Thanks for the help!

Upvotes: 1

Views: 5555

Answers (2)

N8FURY
N8FURY

Reputation: 9970

Think you need something like this,

$(document).scroll(function(){
    var docPos = Math.round(($(window).scrollTop() + $(window).height())/$(document).height() *100);
    $("#img").css("opacity",""+docPos/100+"");
});

Upvotes: 1

WIWIWWIISpitFire
WIWIWWIISpitFire

Reputation: 1549

This worked for me, change the numbers to your liking.

$(window).scroll(function(i){
    var scrollVar = $(window).scrollTop();
    $('.element').css({'top': .7*scrollVar });
    $('.element').css({'opacity':( 100-scrollVar )/100});
})

Reference : https://coderwall.com/p/rxfefg

Upvotes: 1

Related Questions