Jquery / Javascript Opacity animação com rolagem

Eu estou olhando para mudar a opacidade em um object (e ter a transição ser animada) com base em uma rolagem de usuários. exemplo (http://davegamache.com/)

Eu procurei em todos os lugares como aqui, mas acaba me apontando para o plugin waypoints (http://stackoverflow.com/questions/6316757/opacity-based-on-scroll-position)

Eu implementei o plugin [waypoints] [1] e fiz com que o object desaparecesse uma vez acima de 100px. [Usando o atributo offet], mas gostaria de controlar basicamente a opacidade de um object e ter a animação visível como no exemplo acima.

Eu procurei em todo – este é meu último recurso. Qualquer ajuda é muito apreciada.

trabalhando exemplo com ponto inicial e final aqui: http://jsfiddle.net/z7E9u/1/

Eu copio e cole o código básico aqui

var fadeStart=100 // 100px scroll or less will equiv to 1 opacity ,fadeUntil=200 // 200px scroll or more will equiv to 0 opacity ,fading = $('#fading') ; $(window).bind('scroll', function(){ var offset = $(document).scrollTop() ,opacity=0 ; if( offset<=fadeStart ){ opacity=1; }else if( offset<=fadeUntil ){ opacity=1-offset/fadeUntil; } fading.css('opacity',opacity).html(opacity); }); 

Aqui está um exemplo de trabalho: http://jsfiddle.net/meEf4/

E o código:

 var target = $('div'); var targetHeight = target.outerHeight(); $(document).scroll(function(e){ var scrollPercent = (targetHeight - window.scrollY) / targetHeight; if(scrollPercent >= 0){ target.css('opacity', scrollPercent); } }); 

Tudo o que fazemos é pegar a posição de rolagem atual da janela, descobrir qual porcentagem do elemento em questão está fora da canvas e definir sua opacidade com essa porcentagem.

Como tenho menos de 50 de reputação, não posso responder à pergunta de Lonut, como fazer o contrário. Aqui está o meu código, se você quiser o contrário, muito útil para as barras de navegação.

 $(window).scroll(function () { var offset = $(document).scrollTop() var opacity = 0; if (offset <= 0) { opacity = 0; } else if (offset > 0 & offset <= 200) { opacity = (offset - 1) / 200; } else { opacity = 1; } $('.black-background').css('opacity', opacity).html(opacity); }); 

Eu olhei para o código-fonte desse site. usa: $(document).scrollTop(); para determinar a altura de rolagem e $(window).scroll(function(){}) para ligar um ouvinte de evento à rolagem.

tente isto:

 $(window).scroll(function(){ var fromtop = $(document).scrollTop(); // pixels from top of screen $('#fademeout').css({opacity: 100-fromtop}); // use a better formula for better fading }); 

Eu gosto dessa solução

 var fadeStart=100 // 100px scroll or less will equiv to 1 opacity ,fadeUntil=200 // 200px scroll or more will equiv to 0 opacity ,fading = $('#fading') ; $(window).bind('scroll', function(){ var offset = $(document).scrollTop() ,opacity=0 ; if( offset<=fadeStart ){ opacity=1; }else if( offset<=fadeUntil ){ opacity=1-offset/fadeUntil; } fading.css('opacity',opacity).html(opacity); }); 

Como você pode usar a rolagem do mouse para o desvanecimento SOMENTE até que, por exemplo, a opacidade seja atingida e, em seguida, role a página também? As soluções que encontrei até agora desativam completamente a function de rolagem do mouse