JQuery fade div with page scroll

Question

I'm trying to tag a div as the page scrolls down (scrolling the page is not just the fadeOut effect). I adjust the opacity of the div as the page scrolls with this piece of code:

$(window).scroll(function() { var scroll = $(window).scrollTop(); $('.logo_container').css({'opacity':( 100-scroll )/100}); }); 

My problem here is that for me it disappears too quickly, I would like a much more subtle disappearance when the user scrolls. Can anyone think of a better logic to make a slower, more subtle disappearance.

here is JSFIDDLE showing my code in action

Answer 1

This works great with this FIDDLE with very simple logic. This jquery piece is used to make it work:

 $(window).scroll(function () { var scrollTop = $(window).scrollTop(); var height = $(window).height(); $('.logo_container, .slogan').css({ 'opacity': ((height - scrollTop) / height) }); }); 

(height - scrollTop) / height gives a value that is a linear form from 1 to 0.

Example:

height = 430px and scrollTop = 233px.

(height - scrollTop) / height will give an opacity of 0.45 approximately

Answer 2

Solution A

jQuery aimate

 $(window).scroll(function() { var scroll = $(window).scrollTop(); $('.logo_container, .slogan').stop().animate( {opacity: (( 180-scroll )/100)+0.1}, "slow" ); }); 

Solution B

CSS Transition

 .wrapper { height:1000px } .logo_container { background:red; width:250px; height:500px; position:relative; margin:0px auto; transition: opacity 1s ease; } 

Answer 3

improved the solution by changing that part ( 1000-scroll )/1000

JSFIDDLE

hope this helps