jquery fade out div с прокруткой страницы

Question

Я пытаюсь вымыть div, поскольку страница прокручивается вниз (с прокруткой страницы - не только эффект fadeOut). Я регулировки непрозрачности DIV как страница прокручивается вниз, используя этот кусок кода здесь:

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

Моя проблема здесь в том, что для меня она исчезает слишком быстро, я хотел бы гораздо более тонкие замирание как пользователь прокручивает. Может ли кто-нибудь подумать о лучшей логике, чтобы сделать медленнее, более тонкое исчезновение.

вот JSFIDDLE показывая свой код в действии

Answer 1

Раствор А

JQuery анимации

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

Решение B

CSS перехода

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

Answer 2

улучшили решение путем изменения, что часть (1000-scroll)/1000

JSFIDDLE

надеюсь, что это помогает

Answer 3

Это прекрасно работает с этим FIDDLE с очень простой логикой. Используется этот кусок JQuery, чтобы заставить его работать:

$(window).scroll(function() { 
    var scrollTop = $(window).scrollTop(); 
    var height = $(window).height(); 

    $('.logo_container, .slogan').css({ 
     'opacity': ((height - scrollTop)/height) 
    }); 
}); 

(высота - scrollTop)/высота дает множество значений, которое линейная форма 1 до 0.

Пример:

высота = 430px и scrollTop = 233px.

(высота - прокрутка)/высота придаст непрозрачность 0,45 прибл.